深入理解React中的setState

3

组件的状态是一种保存、处理和使用给定组件内部信息的方法,并允许你实现其自身的逻辑。状态本身其实是JavaScript中一个简单的对象(Plain Old Java[Script] Object),并且改变它是使组件重新进行渲染的几种方法之一。

这是React背后最基本的思路之一,但是它(状态)有一些使用起来很棘手的属性,可能会导致应用程序出现意外行为。

更新状态

组件中的构造函数是唯一一个你可以直接写this.state的地方,而在其他地方你应该使用this.setStatesetState将接受最终合并到组件当前状态的一个对象或方法作为参数。

虽然技术上可以通过直接写入this.state来改变状态,但它不会导致组件使用新数据重新渲染,并且通常会导致状态的不一致。

setState是异步的

setState导致协调(重新渲染组件树的过程)的事实是基于下一个属性 — setState是异步的。这允许我们在单个范围内多次调用setState,而不是触发不需要重新渲染整个组件树。

这就是为什么在更新后没有在状态中看到新值的原因。

// assuming this.state = { value: 0 }
this.setState({
  value: 1
});
console.log(this.state.value); // 0

React还会尝试将setState分组调用或批量调用到一个回调中,这会导致我们第一次“陷阱”。

// assuming this.state = { value: 0 };
this.setState({ value: this.state.value + 1});
this.setState({ value: this.state.value + 1});
this.setState({ value: this.state.value + 1});

上面所有的调用过程结束后,this.state.value的值是1,而不是我们所期望的3。为了解决这个问题 …

setState接受一个方法作为它的参数

如果你在setState中传入一个函数作为第一个参数,React将以 at-call-time-current状态来调用它,并期望你返回一个对象来合并到状态中。所以更新我们以上的代码:

// assuming this.state = { value: 0 };
this.setState((state) => ({ value: state.value + 1}));
this.setState((state) => ({ value: state.value + 1}));
this.setState((state) => ({ value: state.value + 1}));

最终的结果将如我们所期望的this.state.value = 3记住在将状态更新为值时始终使用此语法,该值是根据以前的状态计算的!

为什么setState是异步的?

记住你是如何知道setState是异步的?嗯,事实证明并非总是如此!这取决于执行上下文,例如:

  render() {
    return <button onClick={this.inc}>Click to update</button>
  }
  
  inc() {
    console.log('before: ' + this.state.test);
    this.setState({
      test: this.state.test+1
    });
    console.log('after: ' + this.state.test);
  }
  

点击按钮,然后在控制台的显示结果可能是:

// click!
before: 1
after: 1

// click!
before: 2
after: 2

但是如果我们新增以下代码:

componentDidMount() {
  setInterval(this.inc, 1000);
}

结果是:

before: 1
after: 2
before: 2
after: 3

所以,我们应该学会何时期待什么行为吗?显然不是。可以肯定的是,假设setState确实是异步的,因为在将来的版本中它将是如此。

setState接受一个回调函数

如果你需要执行某个函数,或验证状态确实是否正确更新,你可以传递一个函数作为setState调用的第二个参数,一旦状态更新,该函数将被执行。记住,因为在一个范围内的所有更新是批量的,如果你有多次调用setState,则将使用完全更新后的状态调用每个回调。

在更新发生后确保代码执行的另一种方法是将其放在componentWillUpdatecomponentDidUpdate中。然而,当使用shouldComponentUpdate来阻止更新的时候,相反上两个钩子函数是不用去使用的。

常见错误

其中最常见的一个错误是在构造函数中基于属性(props)来使用组件的state设置它的值。考虑以下的代码:

class Component extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: this.props.value };
  }

  render() {
    return <div>The value is: {this.state.value}</div>
  }
}

如果其父组件如下面这样对它进行渲染:

<Component value={42} />

将正确渲染“The value is 42”,如果父组件改变了

<Component value={13} />

最后this.state.value的值依然是42,这是因为React并不会销毁和重新创建这个组件,它将重用一次渲染的组件,不会重新运行构造函数。为了解决这个,你不应将props分配给state而是在render方法中使用this.props.value。然而如果你决定使用state,你应该实现一个解决方案,它将在需要时更新状态,例如:

class Component extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: this.props.value };
  }
  componentWillReceiveProps(nextProps) {
    if(nextProps.value !== this.props.value) {
      this.setState({value: nextProps.value});
    }
  }
  render() {
    return <div>The value is: {this.state.value}</div>
  }
}

记住任何componentWill *函数都不是触发副作用的地方(例如进行AJAX调用),所以对于上面的情况请使用componentDidUpdate(previousProps, previousState)

附录

我们可以预期setState会随着React Fiber及其他更改而发生一些变化。正如前面提到的,在大多数情况下setState是异步的,
另一个变化是使用函数语法可以终止“进行中”的setState调用:

this.setState((state) => {
  if(checkSomeConditions()) return undefined;
  else return { value: 42}
});
    

你可能感兴趣的

载入中...