再聊react hook_ 字节宝

React Hook是React函数式组件，它不仅仅有函数组件的特性，还带有React框架的特性。所以，官网文档多次强调：

只在 React 函数中调用 Hook 不要在普通的 JavaScript 函数中调用 Hook。你可以：

✅ 在 React 的函数组件中调用 Hook
✅ 在自定义 Hook 中调用其他 Hook

1. 那么 React 中 Function Component 与 Class Component 有何不同？

Class Component:

代码语言：javascript复制

class ProfilePage extends React.Component {
  showMessage = () => {
    alert("Followed "   this.props.user);
  };

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

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

Function Component:

代码语言：javascript复制

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

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

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

如下父级组件的调用方式：

代码语言：javascript复制

<ProfilePageFunction user={this.state.user} />
<ProfilePageClass user={this.state.user} />

场景：那么当点击按钮后的 3 秒内，父级修改了 this.state.user，弹出的用户名是修改前的还是修改后的呢？答案：Class Component 展示的是修改后的值，Function Component 展示的是修改前的值原因：this 在 Class Component 中是可变的，当组件入参发生变化时， this.props同步改变。而 Function Component 不存在this.props 的语法，因此 props 总是不可变的。

2. 用Hook 创建函数组件，会有什么变化呢？

代码语言：javascript复制

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 (
     <div>
       <p>You clicked {count} times</p>
       <button onClick={() => setCount(count   1)}>
         增加 count
       </button>
       <button onClick={handleAlertClick}>
         显示 count
       </button>
     </div>
   );
 }
 const rootElement = document.getElementById("root");
 ReactDOM.render(<Example />, rootElement);

场景：点击显示按钮，在 3s 后（模拟耗时任务）会出现弹层。在这 3s 期间快速点击增加 count 按钮结果：3s 后看到的弹层计数仍旧为 0！原因：在 handleAlertClick 函数执行的那个 Render 过程里，count 的值可以看作常量。执行 setCount(count 1) 时会交由一个全新的 Render 渲染，所以不会执行 handleAlertClick 函数。

那我们用useEffect 改造一下呢？

代码语言：javascript复制

...
useEffect(()=>{
    setTimeout(() => {
      alert('count: '   count);
    }, 3000)
  }, [count]); // 监听count变化

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count   1)}>
        增加 count
      </button>
      <button onClick={() => setCount(count - 1)}>
        减少 count
      </button>
    </div>
  );
}
...

结果：会先显示 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 间存在隔离。

代码语言：javascript复制

function Example() {
  const [count, setCount] = useState(0);
  const countRef = useRef(count);

  const handleAlertClick = useCallback(
    () => {
      setTimeout(() => {
        alert("You clicked on: "   countRef.current);
      }, 3000);
    },
    [count]
  );

  return (
    <div>
      <p>You clicked {count} times</p>
      <button
        onClick={() => {
          countRef.current = count   1;
          setCount(count   1);
        }}
      >
        增加 count
      </button>
      <button onClick={handleAlertClick}>显示 count</button>
    </div>
  );

结果: 3s 后 alert 显示的 count的值就是最后设置的结果！

4. `useEffect`搭配`useCallback`

useCallback可以将 Function 写在 Effect 外面，并提供memoized能力。

代码语言：javascript复制

const [query, setQuery] = useState("react");

const fetchData = useCallback(() => {
    const url = "https://hn.algolia.com/api/v1/search?query="   query;
    // ... 获取数据
  }, [query]); // ✅ 监听query变化

  return <Child fetchData={fetchData} />;
}

function Child({ fetchData }) {
  let [data, setData] = useState(null);

  useEffect(() => {
    fetchData().then(setData);
  }, [fetchData]); // ✅ Effect 监听fetchData
  // ...
}

useCallback 做的事情，就是在其依赖变化时，返回一个新的函数引用，触发 useEffect 的依赖变化，并激活其重新执行

5. `useEffect`搭配`useReducer`

利用 useEffect 的兄弟 useReducer 函数，可以将更新与动作解耦。

代码语言：javascript复制

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 完全指南》

react mapreduce

0 人点赞

再聊react hook

1. 那么 React 中 Function Component 与 Class Component 有何不同？

2. 用Hook 创建函数组件，会有什么变化呢？

3. 如何绕过 Capture Value？

4. useEffect搭配useCallback

5. useEffect搭配useReducer

4. `useEffect`搭配`useCallback`

5. `useEffect`搭配`useReducer`