避免重复创建初始状态

React 只在初次渲染时保存初始状态，后续渲染时将其忽略。

function TodoList() {
  const [todos, setTodos] = useState(createInitialTodos());
  // ...

尽管 createInitialTodos() 的结果仅用于初始渲染，但你仍然在每次渲染时调用此函数。如果它创建大数组或执行昂贵的计算，这可能会浪费资源。

为了解决这个问题，你可以将它 作为初始化函数传递给 useState：

function TodoList() {
  const [todos, setTodos] = useState(createInitialTodos);
  // ...

请注意，你传递的是 createInitialTodos 函数本身，而不是 createInitialTodos() 调用该函数的结果, 将函数传递给 useState，React 仅在初始化期间调用它。

注意细节

1. useState 最好写到函数的起始位置，便于阅读
2. useState 严禁出现在代码块（判断、循环）中
3. useState 返回的函数（数组的第二项），引用不变（节约内存空间）
4. 使用函数改变数据，若数据和之前的数据完全相等（使用 Object.is 比较），不会导致重新渲染，以达到优化效率的目的。
5. 使用函数改变数据，传入的值不会和原来的数据进行合并，而是直接替换，不要直接改变对象
6. state是隔离且私有的，如果封装为hook，不同组件使用此hook的状态是不会共享的
7. 事件里 setState 会异步合并，用 prev => … 回调来告诉 React 正在用 state 值做某事而不是仅仅替换它的方法。（这种回调又称更新队列函数）
8. 应该把state中的所有数据视为只读的，包括对象，如果直接改变state对象，视为mutation,mutataion并不会触发react重渲染