-
Hook 是什么？
Hook 是一个特殊的函数，它可以让你“钩入” React 的特性。 -
什么时候用 Hook？
使用函数组件需要添加 state 时，不用转换成 class 组件，可以再函数组件中使用 Hook。
State Hook
-
调用
useState方法的时候做了什么?
它定义一个 “state变量”。这是一种在函数调用时保存变量的方式 ——useState是一种新方法，它与class里面的this.state提供的功能完全相同。一般来说，在函数退出后变量就会”消失”，而state中的变量会被React保留。 -
useState需要哪些参数？
useState()方法里面唯一的参数就是初始state。 -
useState方法的返回值是什么？
返回值为：当前state以及更新state的函数
const [count, setCount] = useState(0);
这里的方括号在 JavaScript 语法叫数组解构。它意味着我们同时创建了 count 和 setCount 两个变量，count 的值为 useState 返回的第一个值，setCount 是返回的第二个值。
Effect Hook
可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。
不需要清除的 Effect
useEffect(() => {
document.title = `You clicked ${count} times`;
});
-
useEffect 做了什么？
通过使用这个 Hook，告诉 React 组件需要在渲染后执行某些操作。React 会保存你传递的函数（我们将它称之为 “effect”），并且在执行 DOM 更新之后调用它。在这个 effect 中，我们设置了 document 的 title 属性，不过我们也可以执行数据获取或调用其他命令式的 API。 -
为什么在组件内部调用 useEffect？
Hook 使用了 JavaScript 的闭包机制，将 useEffect 放在组件内部让我们可以在 effect 中直接访问 count state 变量（或其他 props） -
useEffect 会在每次渲染后都执行吗？
是的，默认情况下，它在第一次渲染之后和每次更新之后都会执行。
需要清除的 effect
给 effect 返回一个函数，React 将会在执行清除操作时调用它。
useEffect(() => {
return () => {
...
};
});
- 为什么每次更新的时候都要运行 Effect
因为 useEffect 默认就会处理。它会在调用一个新的 effect 之前对前一个 effect 进行清理。 - 通过跳过 Effect 进行性能优化
如果某些特定值在两次重渲染之间没有发生变化，可以通知 React 跳过对 effect 的调用，只要传递数组作为 useEffect 的第二个可选参数即可。
useEffect(() => {
document.title = `You clicked ${count} times`;
}, [count]); // 仅在 count 更改时更新
使用此优化方式，请确保数组中包含了所有外部作用域中会随时间变化并且在 effect 中使用的变量，否则你的代码会引用到先前渲染中的旧变量。参阅文档，了解更多关于如何处理函数以及数组频繁变化时的措施内容。
如果想执行只运行一次的 effect（仅在组件挂载和卸载时执行），可以传递一个空数组（[]）作为第二个参数。
注意：Hook 就是 JavaScript 函数。只能在 React 的函数组件中调用 Hook。并且只能在函数最外层调用 Hook。
网友评论