给新手看的 React Hooks 教程( 三 ) _React

在继续往下之前，我们必须要知道一件事儿，在默认情况下， useEffect Hook 在每次渲染和重新渲染时都会执行。
因此，只要组件中的状态发生变化或组件收到新的props时，组件都会重新渲染并导致`useEffect Hook 再次运行。
能不能只执行一次useEffect (就像 componentDidMount 一样)如果 useEffect Hook 在组件每次渲染时都运行，那么我们怎么才能做到 Hook 在挂载组件时仅运行一次？
例如，如果组件从接口获取数据，我们肯定不希望每次重新渲染组件时都去重新请求下数据吧？
useEffect() 钩子接受第二个参数，是一个数组，其中包含导致 useEffect 钩子运行的依赖项的列表。当这些依赖项更改时，它将触发 Effect Hook 。如果想要只运行一次 Effect Hook ，那直接给他传递一个空数组，就OK啦！！
useEffect(() => {console.log('This only runs once');}, []);这就意味着 useEffect Hook 将在第一次渲染时正常运行。然而，当你的组件重新渲染时， useEffect 会想 “好吧，我已经运行了，数组中啥也没有，我没啥依赖项，谁变都跟我没关系了，所以我不必再运行了。” 然后就什么也不做了。

总结：空数组就意味着useEffect Hook只在挂载时运行一次

当有内容更新时使用effect (就像componentDidUpdate一样)我们已经介绍了如何确保 useEffect Hook仅运行一次，但是当我们的组件收到新的 props 时该怎么办？或者我们要在状态更改时运行一些代码？其实Hooks 也能处理！
useEffect(() => {console.log("The name props has changed!") }, [props.name]);请注意，这次我们如何将东西传递给useEffect数组的， props.name 。
在这种情况下， useEffect Hook 将像往常一样在首次加载时运行。每当您的组件从其父组件收到新的props.name时，都会触发useEffect Hook ，并且运行其中的代码。
我们也可以使用状态变量来做同样的事情：

const [name, setName] = useState("Chris"); useEffect(() => {console.log("The name state variable has changed!"); }, [name]);

每当name发生变化时，组件就会重新渲染， useEffect Hook 就会运行并输出消息。而且因为这是一个数组，我们其实可以向它添加多个东西：

const [name, setName] = useState("Chris"); useEffect(() => {console.log("Something has changed!"); }, [name, props.name]);

这样，当 name 状态变量更改或 props.name 更改时， useEffect Hook 都将运行并显示控制台消息。
那我们能用componentWillUnmount吗？想要在组件即将卸载时运行一个Hook ，我们只需从useEffect Hook 返回一个函数
useEffect(() => {console.log('running effect');return () => {console.log('unmounting');};});那我们可以多个不同的 Hooks 一起使用吗？当然! 你可以在组件中使用任意数量的Hooks ，并根据需要混合使用

function App = () => {const [name, setName] = useState();const [age, setAge] = useState();useEffect(()=>{console.log("component has changed");}, [name, age])return(<div>Some jsx here...<div>)}

小结- 接下来干啥呢？你这不已经学会React Hooks了么， Hooks允许我们使用老式的JavaScript函数来创建更简单的React组件，并减少大量代码。
接下来，手不痒痒么？当然是自己赶紧动手拿Hooks做项目体验去啊！

【给新手看的 React Hooks 教程】