react hook问题讲解

React Hook 官网地址：https://react.docschina.org/docs/hooks-faq.html

（1）问题分析？

`Hook 是什么？`

Hook 是一个特殊的函数，它可以让你“钩入” React 的特性。例如，useState 是允许你在 React 函数组件中添加 state 的 Hook。稍后我们将学习其他 Hook。

`什么时候我会用 Hook？`

如果你在编写函数组件并意识到需要向其添加一些 state，以前的做法是必须将其它转化为 class。现在你可以在现有的函数组件中使用 Hook。

`什么是副作用？`

在 React 组件中执行数据获取、订阅或者手动修改 DOM，我们统一把这些操作称为“副作用”，或者简称为“作用”。

`两种常见副作用操作是什么？`

需要清除的
不需要清除的

不需要清除effect

只想在 React 更新 DOM 之后运行一些额外的代码。（比如发送网络请求，手动变更 DOM，记录日志，这些都是常见的无需清除的操作。）

需要清除effect

例如订阅外部数据源。这种情况下，清除工作是非常重要的，可以防止引起内存泄露！

（2）useEffect使用和意义？

在一个函数里面可以多次使用；
代表 componentDidMount、componentDidUpdate 和 componentWillUnmount；
useEffect默认可以当做class中的componentDidMount生命周期：只在组件挂载的时候运行一次；
清除副作用，在useEffect 的函数中，在return一个函数；（副作用函数还可以通过返回一个函数来指定如何“清除”副作用）；
只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用；
只能在 React 的函数组件中调用 Hook。不要在其他 JavaScript 函数中调用；
组件之间重用一些状态逻辑（高阶组件和 render props）自定义 Hook 可以让你在不增加组件的情况下达到同样的目的。

①、②、③、④、⑤、⑥、⑦、⑧、⑨、⑩ ⑪、⑫、⑬、⑭、⑮

useEffect 问题总结

①、useEffect 做了什么？
通过使用这个 Hook，你可以告诉 React 组件需要在渲染后执行某些操作。

②、为什么在组件内部调用 useEffect？
将 useEffect 放在组件内部让我们可以在 effect 中直接访问 count state 变量（或其他 props）。

③、useEffect 会在每次渲染后都执行吗？
是的，默认情况下，它在第一次渲染之后和每次更新之后都会执行。

④、使用useEffect Hook 其中一个目的？
就是要解决 class 中生命周期函数经常包含不相关的逻辑，但又把相关逻辑分离到了几个不同方法中的问题。

⑤、useEffect 执行顺序？
Hook 允许我们按照代码的用途分离他们，而不是像生命周期函数那样。React 将按照 effect 声明的顺序依次调用组件中的每一个 effect。
⑥、在某些情况下，每次渲染后都执行清理或者执行 effect 可能会导致性能问题？

如果某些特定值在两次重渲染之间没有发生变化，你可以通知 React 跳过对 effect 的调用，只要传递数组作为 useEffect 的第二个可选参数即可：

useEffect(() => {document.title = `You clicked ${count} times`;
}, [count]); // 仅在 count 更改时更新

⑦、何时使用？
如果你要使用此优化方式，请确保数组中包含了所有外部作用域中会随时间变化并且在 effect 中使用的变量，否则你的代码会引用到先前渲染中的旧变量。

⑧、如何执行一次effect？
如果想执行只运行一次的 effect（仅在组件挂载和卸载时执行），可以传递一个空数组（[]）作为第二个参数。

useEffect(() => {document.title = `You clicked ${count} times`;
}, []); // 仅在 count 更改时更新

（3）react hook复用数据状态？

可以创建涵盖各种场景的自定义 Hook，如表单处理、动画、订阅声明、计时器，甚至可能还有更多我们没想到的场景。

（4）useContext 和useReducer 的作用？

useContext （不使用组件嵌套就可以订阅 React 的 Context）

useReducer 可以让你通过 reducer 来管理组件本地的复杂 state

** ①、useContext接受值，返回值，context的值来源？**

const value = useContext(MyContext);

接收一个 context 对象（React.createContext 的返回值）并返回该 context 的当前值。当前的 context 值由上层组件中距离当前组件最近的 <MyContext.Provider> 的 value prop 决定。
注意点：
useContext 的参数必须是 context 对象本身

** ②、useReducer使用场景？**

const [state, dispatch] = useReducer(reducer, initialArg, init);

state 逻辑较复杂且包含多个子值，
或者下一个 state 依赖于之前的 state 等

（5）使用State Hook说明

组件昵称（称呼）？
没有React state 的能力的成为“无状态组件”，有React state 的能力的成为“函数组件”；

useState 需要哪些参数？
useState() 方法里面唯一的参数就是初始 state；

调用 useState 方法的时候做了什么?
它定义一个 “state 变量”；

useState 方法的返回值是什么？
返回值为：当前 state 以及更新 state 的函数。

读取state？

<p>You clicked {count} times</p>

更新state？

<button onClick={() => setCount(count + 1)}>Click me</button>

初始化时需要处理state情况？

（1）初始值需要计算
如果初始 state 需要通过复杂计算获得，则可以传入一个函数，在函数中计算并返回初始的 state，此函数只在初始渲染时被调用：

const [state, setState] = useState(() => {const initialState = someExpensiveComputation(props);return initialState;
});

（2）初始值需要计算，且消耗较大
如果你在渲染期间执行了高开销的计算，则可以使用 useMemo 来进行优化。

（6）使用useRef说明

const refContainer = useRef(initialValue);

useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（initialValue）。返回的 ref 对象在组件的整个生命周期内保持不变。

以上都是常见疑惑问题总结，下一篇写一下实例分析；