Hooks 解读

1. 每次 setState 都是一次刷新,里面得函数也是新得函数,值为当前的状态值
2. 在任意 一次 的渲染中,props 和 state 是始终不变的
3. 每一个组件内的函数（包括事件处理函数，effects，定时器或者 API 调用等等）会捕获某次渲染中定义的 props 和 state
4. refs 会拿到最新的值,一般是用到 useEffect 钩子里面,在那里面获取当前最新值

function Example() {
const [count, setCount] = useState(0);
const latestCount = useRef(count);
useEffect(() => {
// Set the mutable latest value
latestCount.current = count;
setTimeout(() => {
// Read the mutable latest value
console.log(You clicked ${latestCount.current} times);
}, 3000);
});

5. 当你想更新一个状态，并且这个状态更新依赖于另一个状态的值时，你可能需要用 useReducer 去替换它们。例子:demo
6. setCount(c => c + 1); 可以解决依赖;
7. 在组件内定义的函数每一次渲染都在变
8. 如果一个函数没有使用组件内的任何值，你应该把它提到组件外面去定义，然后就可以自由地在 effects 中使用:

function getFetchUrl(query) {
  return "https://hn.algolia.com/api/v1/search?query=" + query;
}
function SearchResults() {
  useEffect(() => {
    const url = getFetchUrl("react");
    // ... Fetch data and do something ...
  }, []); // ✅ Deps are OK
  useEffect(() => {
    const url = getFetchUrl("redux");
    // ... Fetch data and do something ...
  }, []); // ✅ Deps are OK
  // ...
}

9. 数据的初始组装可以在 useState 那里进行

const [formData, setFormData] = useState(() => {
  return calculateAFieldData(templateNetWorthData);
});

10. useEffect 总是在页面渲染后再执行