hook和Class组件的区别

hook会捕获渲染所用的值

1 .在class中取值，使用this.props.user形式，在react中，props是不可变的，所以他们永远不会改变
2 .上面的说法是错的，props是不可变的，但是this是在变得，所以会取到最新的值

class ProfilePage extends React.Component {
  render() {
    // Capture the props!
    const props = this.props;

    // Note: we are *inside render*.
    // These aren't class methods.
    const showMessage = () => {
      alert('Followed ' + props.user);
    };

    const handleClick = () => {
      setTimeout(showMessage, 3000);
    };

    return <button onClick={handleClick}>Follow</button>;
  }
}
//1 .在每一次特定的渲染中都获得了对应的state，props
//2 .它内部的任何代码（包括showMessage）都保证可以得到这一次特定渲染所使用的props
//3 .然后我们可以在里面添加任意多的辅助函数，它们都会使用被捕获的props和state

2 .在上面的基础上删除类的包裹来获得更加简单的代码

function ProfilePage(props) {
  const showMessage = () => {
    alert('Followed ' + props.user);
  };

  const handleClick = () => {
    setTimeout(showMessage, 3000);
  };

  return (
    <button onClick={handleClick}>Follow</button>
  );
}

追踪一个全局变量

function MessageThread() {
  const [message, setMessage] = useState('');

  // 保持追踪最新的值。
  const latestMessage = useRef('');
  useEffect(() => {
    latestMessage.current = message;
  });

  const showMessage = () => {
    alert('You said: ' + latestMessage.current);
  };

我们在一个effect*内部*执行赋值操作以便让ref的值只会在DOM被更新后才会改变。这确保了我们的变量突变不会破坏依赖于可中断渲染的[时间切片和 Suspense](https://reactjs.org/blog/2018/03/01/sneak-peek-beyond-react-16.html)等特性

只能在函数组件最顶层使用hook

1 .useState原理

1 .可以使用第二个数组项返回，并且setter将控制hook管理的状态
2 .https://miro.medium.com/max/630/1*8TpWnrL-Jqh7PymLWKXbWg.png
3 .每次useState运行的时候，都会调用操作将setter函数推入到setters数组，然后将某些状态推入state数组
4 .后续的每个渲染都将重置光标，并且从每个数组中读取这些值
5 .事件处理，每个设置其都有其光标位置的引用，因此触发对任何设置器的调用。setter他将更改状态数组中改位置的状态值

1_3L8YJnn5eV5ev1FuN6rKSQ.png

6 .因为我们正在处理指向一组数组的游标，所以如果您更改渲染中调用的顺序，则游标将不会与数据匹配，并且您的use调用将不会指向正确的数据或处理程序

React实质

1 .如果我们说UI在概念上是当前应用状态的一个函数，那么事件处理程序则是渲染结果的一部分 —— 就像视觉输出一样。我们的事件处理程序“属于”一个拥有特定 props 和 state 的特定渲染
2 .React中函数式组件和类组件之间的巨大差别：函数式组件捕获了渲染所使用的值。
3 .react只是一个状态同步工具，每次渲染的状态都会固化下来，这包括state,props,useEffect以及卸载Function component中的所有函数
4 .舍弃了生命周期函数，我们需要做的就是告诉React如何对比Effects，就是第二个参数，还有别的方法么？
5 .useReducer的dispatch会绕过错过依赖更新不成功的问题

useEffect(() => {
    const id = setInterval(() => {
      dispatch({ type: 'tick' });
    }, 1000);
    return () => clearInterval(id);
  }, [dispatch]);
//注意，这里的disopatch是最新的,所以虽然setInterval每次都是新生成的，但是dispatch的都是上一次的值

  return (
    <>
      <h1>{count}</h1>
      <input value={step} onChange={e => {
        dispatch({
          type: 'step',
          step: Number(e.target.value)
        });
      }} />
    </>
  );