不使用setState() 去操作state

导致的问题

  • 在state改变时组件不会重新渲染.
  • 在未来某个时候如果通过setState改变了state, 那么这次未通过setState去改变的state将会同样生效.

坏实践

  1. class SampleComponent extends Component {
  2.   constructor(props) {
  3.     super(props);
  5.     this.state = {
  6.       items: ['foo', 'bar']
  7.     };
  9.     this.handleClick = this.handleClick.bind(this);
  10.   }
  12.   handleClick() {
  13.     // 坏实践: 我们手动更改了state而不是通过setState函数.
  14.     this.state.items.push('lorem');
  16.     this.setState({
  17.       items: this.state.items
  18.     });
  19.   }
  21.   render() {
  22.     return (
  23.       <div>
  24.         {this.state.items.length}
  25.         <button onClick={this.handleClick}>+</button>
  26.       </div>
  27.     )
  28.   }
  29. }

好实践

  1. class SampleComponent extends Component {
  2.   constructor(props) {
  3.     super(props);
  5.     this.state = {
  6.       items: ['foo', 'bar']
  7.     };
  9.     this.handleClick = this.handleClick.bind(this);
  10.   }
  12.   handleClick() {
  13.     // 我们使用了setState()方法来更新state, 组件将会在state更改后被更新.
  14.     this.setState({
  15.       items: this.state.items.concat('lorem')
  16.     });
  17.   }
  19.   render() {
  20.     return (
  21.       <div>
  22.         {this.state.items.length}
  23.         <button onClick={this.handleClick}>+</button>
  24.       </div>
  25.     )
  26.   }
  27. }

参考资料:

React Design Patterns and best practices by Michele Bertoli.