从零开始学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 绑定的方法，还有什么方式可以解决这个问题：

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

箭头函数没有 this，到上一层作用域找
jsx 复制代码
```
btnClick = () => {
	console.log("123")
}
```
事件监听时传入箭头函数（推荐），然后在箭头函数里面调用事件处理函数

这样就能隐式绑定，this 就是组件对象
jsx 复制代码
```
<button onclick={() => this.btnClick()}> </button>
```

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

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

条件渲染

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

条件渲染方式

条件判断语句
- 适合逻辑较多的情况
三元运算符
- 适合逻辑比较简单的情况
与运算符&&
- 适合如果条件成立，渲染某一个组件；如果条件不成立，什么内容也不渲染；
  jsx 复制代码
```
{isShow && <div>{content}</div>}
```

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 的函数调用

createElement 的 API 可以看官方文档，了解一下就行了

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