再聊react hook

React Hook是React函数式组件，它不仅仅有函数组件的特性，还带有React框架的特性。所以，官网文档多次强调： 只在 React 函数中调用 Hook 不要在普通的 JavaScript 函数中调用 Hook。你可以： ✅ 在 React 的函数组件中调用 Hook ✅ 在自定义 Hook 中调用其他 Hook 1. 那么 React 中 Function Component 与 Class Component 有何不同？ Class Component: class ProfilePage extends React.Component { showMessage = () => { alert("Followed " + this.props.user); }; handleClick = () => { setTimeout(this.showMessage, 3000); }; render() { return Follow; } } Function Component: function ProfilePage(props) { const showMessage = () => { alert("Followed " + props.user); }; const handleClick = () => { setTimeout(showMessage, 3000); }; return Follow; } 如下父级组件的调用方式： 场景：那么当点击按钮后的 3 秒内，父级修改了 this.state.user，弹出的用户名是修改前的还是修改后的呢？ 答案：Class Component 展示的是修改后的值，Function Component 展示的是修改前的值 原因：this 在 Class Component 中是可变的，当组件入参发生变化时， this.props同步改变。而 Function Component 不存在this.props 的语法，因此 props 总是不可变的。 2. 用Hook 创建函数组件，会有什么变化呢？ import React, { useState, useCallback } from "react"; import ReactDOM from "react-dom"; function Example() { const [count, setCount] = useState(0); const handleAlertClick = useCallback(()=>{ setTimeout(() => { alert('You clicked on: ' + count); }, 3000) }, [count]); return (

You clicked {count} times

setCount(count + 1)}> 增加 count 显示 count

); } const rootElement = document.getElementById("root"); ReactDOM.render(, rootElement); 场景：点击 显示 按钮，在 3s 后（模拟耗时任务）会出现弹层。在这 3s 期间快速点击 增加 count 按钮 结果：3s 后看到的弹层计数仍旧为 0！ 原因：在 handleAlertClick 函数执行的那个 Render 过程里，count 的值可以看作常量 。执行 setCount(count + 1) 时会交由一个全新的 Render 渲染，所以不会执行 handleAlertClick 函数。 那我们用useEffect 改造一下呢？ ... useEffect(()=>{ setTimeout(() => { alert('count: ' + count); }, 3000) }, [count]); // 监听count变化 return (

You clicked {count} times

setCount(count + 1)}> 增加 count setCount(count - 1)}> 减少 count

); } ... 结果：会先显示 1，然后显示 0。useEffect被触发两次。 原因：useEffect也是具有 Capture Value 的特性，每次render都是独立快照，拿到的 count 都是固化下来的常量。和上面例子不同之处在于，它监听了count变化，可以被触发多次Render。 什么是Capture Value? 每次 Render 的内容都会形成一个快照并保留下来，因此当状态变更而 Rerender 时，就形成了 N 个 Render 状态，而每个 Render 状态都拥有自己固定不变的 Props 与 State。 3. 如何绕过 Capture Value？ 利用 useRef ！ useRef定义 useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（initialValue）。返回的 ref 对象在组件的整个生命周期内保持不变。 ref 类型的变量通常是用来存储 DOM 元素引用。 但在 react hooks 中，它可以存放任何可变数据，并在所有 Render 过程中保持着唯一引用，因此所有对 ref 的赋值或取值，拿到的都只有一个最终状态，而不会在每个 Render 间存在隔离。 function Example() { const [count, setCount] = useState(0); const countRef = useRef(count); const handleAlertClick = useCallback( () => { setTimeout(() => { alert("You clicked on: " + countRef.current); }, 3000); }, [count] ); return (

You clicked {count} times

{ countRef.current = count + 1; setCount(count + 1); }} > 增加 count 显示 count

); 结果: 3s 后 alert 显示的 count的值就是最后设置的结果！ 4. useEffect搭配useCallback useCallback可以将 Function 写在 Effect 外面，并提供memoized能力。 const [query, setQuery] = useState("react"); const fetchData = useCallback(() => { const url = "https://hn.algolia.com/api/v1/search?query=" + query; // ... 获取数据 }, [query]); // ✅ 监听query变化 return ; } function Child({ fetchData }) { let [data, setData] = useState(null); useEffect(() => { fetchData().then(setData); }, [fetchData]); // ✅ Effect 监听fetchData // ... } useCallback 做的事情，就是在其依赖变化时，返回一个新的函数引用，触发 useEffect 的依赖变化，并激活其重新执行 5. useEffect搭配useReducer 利用 useEffect 的兄弟 useReducer 函数，可以将更新与动作解耦。 const [state, dispatch] = useReducer(reducer, initialState); const { count, step } = state; useEffect(() => { const id = setInterval(() => { dispatch({ type: "tick" }); // Instead of setCount(c => c + step); }, 1000); return () => clearInterval(id); }, [dispatch]); 这就是一个局部 “Redux”，由于更新变成了dispatch({ type: "tick" }) 所以不管更新时需要依赖多少变量，在调用更新的动作里都不需要依赖任何变量。 具体更新操作在 reducer 函数里写就可以了 参考文章： 理解 React Hooks 的 Capture Value 特性 精读《useEffect 完全指南》 微信公众号：

本文章由javascript技术分享原创和收集