持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第18天，点击查看活动详情

前言

上一篇文章学习了react的jsx语法，以及大括号表达式，今天继续学习react的其它知识点。

react语法

事件绑定

事件绑定也是通过大括号表达式实现的，书写格式为 on+ 事件的类型。事件类型首字母要大写。

比如onClick, onMouseEnter等等

class App extends React.Component {
  clickFn (e) {
    console.log(e)
    console.log('click事件触发')
  }

  render () {
    return (
      <div className="App" onClick={this.clickFn}>
        <button>测试事件</button>
      </div >
    )
  }
}

我们打印了事件对象e，这个是react自己合成的事件对象，非原生事件对象。

但是你的阻止冒泡（stopPropagation），阻止默认事件（preventDefault）等等都可以通过这个合成事件对象实现。

条件渲染

react的条件渲染，可以通过js的条件语句实现，比如if，else-if， else语句，&&操作符，三元运算符等等。

例子如下：

if语句：

当status为true时，渲染h1标签，当status为false时，渲染h2标签。

class App extends React.Component {
  status = true
  render () {
    let element = null
    if (this.status) {
      element = <h1>true</h1>
    } else {
      element = <h2>false</h2>
    }
    return (
      <div className="App">
        {element}
      </div>
    )
  }
}

&&语句：

当status为true时才会渲染后面的span内容。

class App extends React.Component {
  status = true
  render () {
    return (
      <div className="App">
        {this.status && <span>test</span>}
      </div>
    )
  }
}

列表渲染

react的列表渲染，可以js的循环语句实现。比如for循环，forEach，reduce等等

for循环

定义一个list函数，里面执行for循环，把遍历的jsx元素push到arr数组中，最后返回arr。

然后下面的App组件通过大括号表达式执行list函数，最后渲染出三个h1元素。

代码如下：

function list () {
  const len = 3
  const arr = []
  for (let i = 0; i < len; i++) {
    arr.push(<h1>{i}</h1>)
  }
  return arr
}
class App extends React.Component {
  render () {
    return (
      <div className="App">
        {list()}
      </div>
    )
  }
}

但是这样写是有问题的，因为你没有提供key。

因为react是通过key来判断元素是否需要更新，如果你没有提供key的话，就可能会全部更新，这样会有性能问题。

key的值推荐使用唯一的标识来区分,比如id。最好不要用index索引做key，除非你确定列表是不会变化的。

学习react的语法（2）

前言

react语法

事件绑定

条件渲染

列表渲染