如何解决上下文中重新渲染过多的问题？

Question

每当我在上下文中更新users (array) 中的user (object) - 所有使用users 的组件都会重新渲染。

---

我尝试过的

我有一个使用上下文值的组件：

const DashboardCardList=()=> {
    const context = useContext(StaticsContext);
    const users = context.users.filter(user=>user.visible);

    return !users
        ? <Loading/>
        : (
            <Container>
                {users.map(user=>
                    <DashboardCard key={user._id} user={user}/>
                )}
            </Container>
        );
};

我的更新函数（更新上下文状态）：

const onUserUpdate=(user)=>{
   const index = this.state.users.findIndex(item => item._id === user._id);
   const users = [...this.state.users]
   users[index] = user;
   this.setState({users:users});
}

最终组件：

const DashboardCard=({user})=> {
    console.log("I'm here!", user);
    return ...;
}

---

问题

为什么它一直重新渲染？是不是因为context？
这个要怎么写？

Answer 1

没有针对上下文消费者的渲染救助 (v17)。

这是一个演示，Consumer 总是会因为他是上下文消费者而重新渲染，即使他不消费任何东西。

import React, { useState, useContext, useMemo } from "react";
import ReactDOM from "react-dom";

// People wonder why the component gets render although the used value didn't change
const Context = React.createContext();

const Provider = ({ children }) => {
  const [counter, setCounter] = useState(0);
  const value = useMemo(() => {
    const count = () => setCounter(p => p + 1);
    return [counter, count];
  }, [counter]);
  return <Context.Provider value={value}>{children}</Context.Provider>;
};

const Consumer = React.memo(() => {
  useContext(Context);
  console.log("rendered");
  return <>Consumer</>;
});

const ContextChanger = () => {
  const [, count] = useContext(Context);
  return <button onClick={count}>Count</button>;
};

const App = () => {
  return (
    <Provider>
      <Consumer />
      <ContextChanger />
    </Provider>
  );
};

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

修复它：

• 为每个消耗的值使用一个上下文。这意味着上下文具有单个值，（不，应用程序中的多个上下文没有问题）。
• 使用状态管理解决方案，如 Recoil.js、Redux、MobX 等（尽管可能有点矫枉过正，但请事先考虑好应用设计）。
• 可以通过memoizing Provider's values with useMemo实现小优化。