从零开始学React-coderwhy React课程笔记(三)

第二天: this绑定规则-传递event和参数-JSX-虚拟DOM

React 事件绑定

React 事件的命名采用小驼峰式,如 onClick,将事件处理函数传递到 {} 里面

参数传递

默认情况下执行事件函数时,会向其传入一个 event 对象的参数。

jsx 复制代码
btnClick(event) = {
	console.log(event);
}
<button onclick={this.btnClick.bind(this)}> </button>

如果想传递更多的参数,推荐用箭头函数的写法

jsx 复制代码
btnClick(event,name,age) = {
	console.log(event,name,age);
}
<button onclick={(event) => this.btnClick(event,"why",18)}> </button>

电影列表选中案例

React 真的很灵活,一个事件绑定都有很多种写法。其实就是在写 JS,想怎么写都行

jsx 复制代码
class App extends React.Component {
  constructor() {
    super()
    this.state = {
      movies: ["电影1", "电影2", "电影3", "电影4"],
      currentIndex: 0
    }
  }

  itemClick(index) {
    this.setState({ currentIndex: index })
  }

  render() {
    const { movies, currentIndex } = this.state

    return (
      <div>
        <ul>
          { 
            movies.map((item, index) => {
              return (
                <li
                  className={ currentIndex === index ? 'active': '' }
                  key={item}
                  onClick={() => this.itemClick(index)}
                >
                  {item}
                </li>
              )
            }) 
          }
        </ul>
      </div>
    )
  }
}

类组件的 this 绑定问题

问题可以看第一天的笔记:juejin.cn/post/728184...,这里再记一下除了 bind 绑定的方法,还有什么方式可以解决这个问题:

  1. 使用 ES6 class fields 语法:将事件处理函数写成箭头函数

    箭头函数没有 this,到上一层作用域找

    jsx 复制代码
    btnClick = () => {
    	console.log("123")
    }
  2. 事件监听时传入箭头函数(推荐),然后在箭头函数里面调用事件处理函数

    这样就能隐式绑定,this 就是组件对象

    jsx 复制代码
    <button onclick={() => this.btnClick()}> </button>

coderwhy 的学习小建议:了解真相才能获得真正的自由

  • 多花时间把一个知识点搞明白,以后就不会有疑惑了

条件渲染

条件渲染:根据不同的情况显示不同的内容,或者决定是否渲染某部分内容

条件渲染方式

  1. 条件判断语句

    • 适合逻辑较多的情况
  2. 三元运算符

    • 适合逻辑比较简单的情况
  3. 与运算符&&

    • 适合如果条件成立,渲染某一个组件;如果条件不成立,什么内容也不渲染;

      jsx 复制代码
      {isShow && <div>{content}</div>}
  4. v-show 的效果

    • 控制 display 属性是否为 none

      jsx 复制代码
      <h2 style={{display: isShow ? 'block' : 'none'}}>哈哈哈哈</h2>

列表渲染

在 React 中,展示列表最多的方式就是使用数组的 map 高阶函数。案例在第一天就写过:从零开始学React-coderwhy React课程笔记(二)

同理,也可以用数组的其他方法(高阶函数),例如 filter 函数和 slice 函数

列表的 key

建议在列表的每个子元素上都加上一个 key 属性,key 的作用是提高 diff 算法的效率,这点跟 Vue 很类似

JSX 的本质

JSX 就是 React.createElement(type, config, children) 函数的语法糖,最终所有的 JSX 都会被转换成 React.createElement 的函数调用

createElementAPI 可以看官方文档,了解一下就行了


第二天上午:this绑定规则-传递event和参数-JSX-虚拟DOM,完.

相关推荐
一斤代码2 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子2 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年2 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子3 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina3 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路4 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_4 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
甜瓜看代码4 小时前
1.
react.js·node.js·angular.js
伍哥的传说4 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409194 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app