React学习总结2--state与props

React组件是根据props与state这两个参数来计算呈现对应的ui表现。

state

state是组件内部状态的保存。state代表组件ui的最小状态集合，在我们刚接触react的时候很多时候不明白是否应该把变量作为state，其实是有一定的依据条件来判断的：

是否是通过props获取？如果是，它就不必为state
是否是一个常量，整个生命周期都保持不变？如果是，它就不必为state
是否可以通过state或props计算得到？如果是，它就不必为state
是否在组件render方法中使用？如果不是，它就不必为state

state的修改

使用setState

import React, { Component } from "react";

class SetStateCom extends Component {
  state = {
    name: "dong"
  };

  onChange = e => {
    this.setState({
      name: e.target.value
    });
  };

  render() {
    let { name } = this.state;
    return (
      <div>
        <input value={name} onChange={this.onChange} /> <br />
        name: {name}
      </div>
    );
  }
}

export default SetStateCom;

state更新异步，执行更新后的操作可以在setState的回调函数中执行。

  onChange = e => {
    this.setState(
      {
        name: e.target.value
      },
      () => console.log(`${this.state.name} ------ 2`)
    );
    console.log(`${this.state.name} ------ 1`);
  };

// 打印结果
// dong ------ 1
// dongd ------ 2

不能依赖当前state进行修改，可以使用(preState) => ({})作为参数的方式进行setState更新。
调用setState，会把要修改的状态放入一个队列中，最后将多次的setState状态进行合并。所以不能依赖当前的state计算下次state。
1
2
3
4
5
6
7
8
onChange = e => {
this.setState({
name: this.state.name + 'old1'
});
this.setState({
name: this.state.name + 'old2'
})
};

最后的结果 dongold2 ,并不是dongold1old2 。如果想依赖上次的state，可以这样处理：

onChange = e => {
  this.setState(state => ({
    name: state.name + "old1"
  }));
  this.setState(state => ({
    name: state.name + "old2"
  }));
};

这样每次设置就都会依赖上次的state, 就是dongold1old2 了。

避免可变对象的产生
示例：

class ListOfWords extends PureComponent {
  render() {
    return <div>{this.props.words.join(",")}</div>;
  }
}

class WordAdder extends Component {
  constructor(props) {
    super(props);
    this.state = {
      words: ["marklar"]
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    // 这部分代码很糟，而且还有 bug
    const words = this.state.words;
    words.push("marklar");
    this.setState({ words: words });
  }

  render() {
    return (
      <div>
        <button onClick={this.handleClick} />
        <ListOfWords words={this.state.words} />
      </div>
    );
  }
}

这里点击并没有触发我们想要的效果，是因为PureComponent仅仅会对props或者state进行浅比较，在handleClick中改变的是同一个words数组，虽然数组中单词已经变化，但是比较结果是相同的。这时就需要我们考虑如何避免可变数据的产生了。

避免该问题最简单的方式是避免更改你正用于 props 或 state 的值。
对于数字，字符串，布尔值，null， undefined直接修改即可。
对于数组可以使用es6的扩展运算符，以及concat、slice、filter等会返回一个新数组的方法。不要使用push、pop、shift、unshift、splice等修改原数组的方法。
对于对象可以使用es6的Object.assgin，对象扩展语法，等可以返回一个新对象的方法。

props

props是组件对外的接口。下层组件可以通过props使用上层组件的数据或者方法。同样props的更新也是异步的。
组件无论是使用函数声明还是通过 class 声明，都决不能修改自身的 props。
所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。

琉璃_心