从零开始学React-coderwhy React课程笔记（三）

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

React 事件绑定

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

参数传递

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

btnClick(event) = {
	console.log(event);
}
<button onclick={this.btnClick.bind(this)}> </button>

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

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

电影列表选中案例

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

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 绑定问题

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

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

   btnClick = () => {
   	console.log("123")
   }
   

2. 事件监听时传入箭头函数（推荐），然后在箭头函数里面调用事件处理函数

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

   <button onclick={() => this.btnClick()}> </button>
   

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

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

条件渲染

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

条件渲染方式

1. 条件判断语句

   • 适合逻辑较多的情况

2. 三元运算符

   • 适合逻辑比较简单的情况

3. 与运算符&&

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

     {isShow && <div>{content}</div>}
     

4. v-show 的效果

   • 控制 display 属性是否为 none

     <h2 style={{display: isShow ? 'block' : 'none'}}>哈哈哈哈</h2>
     

列表渲染

同理，也可以用数组的其他方法（高阶函数），例如 filter 函数和 slice 函数

列表的 key

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

JSX 的本质

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

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

---

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