React + Flux - 应该将数据存储在组件状态还是道具中

Java

在React和Flux的开发中，我们经常面临一个问题：应该将数据存储在组件状态还是道具中？这是一个广泛讨论的话题，不同的开发者有不同的观点和偏好。本文将探讨这个问题，并提供一些案例代码来帮助我们理解这个问题。

组件状态 vs. 属性

在React中，组件状态（state）是组件自己管理的数据，而属性（props）是从父组件传递给子组件的数据。组件状态是可变的，而属性是不可变的。

组件状态的使用场景

组件状态适用于那些只在组件内部使用的数据。当一个数据只对组件自身的渲染和行为有影响时，我们可以将其存储在组件状态中。例如，一个计数器组件可以将当前计数存储在组件状态中：

Javascript
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }
  render() {
    return (
      <div>
        
Count: {this.state.count}
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
  increment = () => {
    this.setState(prevState => ({
      count: prevState.count + 1
    }));
  };
}
ReactDOM.render(<Counter />, document.getElementById('root'));

在上面的例子中，计数器的当前计数被存储在组件状态中，并通过this.state.count进行访问。当按钮被点击时，increment方法会更新组件状态的计数值，并重新渲染组件。

属性的使用场景

属性适用于那些需要从父组件传递给子组件的数据。当一个数据需要在多个组件之间共享时，我们可以将其存储在属性中。例如，一个待办事项列表组件可以接收一个代表待办事项数组的属性：

Javascript
class TodoList extends React.Component {
  render() {
    return (
      <ul>
        {this.props.todos.map(todo => (
          <li key={todo.id}>{todo.text}</li>
        ))}
      </ul>
    );
  }
}
const todos = [
  { id: 1, text: 'Buy milk' },
  { id: 2, text: 'Walk the dog' },
  { id: 3, text: 'Do laundry' }
];
ReactDOM.render(<TodoList todos={todos} />, document.getElementById('root'));

在上面的例子中，待办事项列表组件接收一个名为todos的属性，这个属性是一个待办事项数组。组件通过this.props.todos访问这个属性，并根据数组的内容渲染列表项。

在React和Flux的开发中，我们可以根据需求将数据存储在组件状态或属性中。组件状态适用于只在组件内部使用的数据，而属性适用于需要在多个组件之间共享的数据。了解这两者的区别和用法，可以帮助我们更好地组织和管理应用程序的数据。