react 入门

为什么说react里面的数据发生改变,其页面显示也会改变?

这是因为数据的改变,会引起react里面的state发生改变,state里面的数据一旦改变的话,那么render()函数就会重新渲染一次,自然页面显示就发生了改变

react 性能优化有哪些?

1. 给方法传key的时候,最好不要传index下标值,为的是提升虚拟dom比对的性能
2. 子组件不做每次更新,提升性能

  shouldComponentUpdate(nextProps, nextState) {
    // 如果当前子组件的内容与 父组件传的不一样,则需要更新
    if (nextProps.content !== this.props.content) {
      return true;
    } else {
      return false;
    }
  }

3. 作用域的修改放在constructor里面

 constructor(props) {
    super(props);
    this.handClick = this.handClick.bind(this);
  }

4.setSate(异步函数)时

// 优化前
    // this.setState({
    //   inputValue: e.target.value
    // });
    // 优化后
    const value = e.target.value;
    this.setState(() => ({
      inputValue: value
    }));

react有哪些生命周期函数

image.png