我应该将反应钩子作为值传递给上下文提供者吗？答案

【问题标题】：Should i pass react hooks as a value to Context Provider?我应该将反应钩子作为值传递给上下文提供者吗？
【发布时间】：2019-10-29 14:20:13
【问题描述】：

我需要能够过滤掉一些用户的全局变量 users。使用作为值传递的反应挂钩会导致多次重新渲染页面。哪种解决方案更好，为什么？

    export const UsersProvider = props => {
  const [user, setUser] = useState({
    isLogged: false
  });

  return (
    <UsersContext.Provider value={[filteredUsers, setFilteredUsers]}>
{props.children}
    </UsersContext.Provider>
  );
};

或

class UserProvider extends React.Component {
  constructor(props) {
    super(props);

    this.setUser = () => {
      this.setState(state => {
        return {user: "true"};
      });
      console.log(this.state.user);
    };

    // State also contains the updater function so it will
    // be passed down into the context provider
    this.state = {
      user: false,
      setUser: this.setUser
    };
  }

  render() {
    return (
      <UserContext.Provider value={this.state}>
        {this.props.children}
      </UserContext.Provider>
    );
  }
}

【问题讨论】：

标签： javascript reactjs react-hooks react-context

【解决方案1】：

您只需要在消费者中添加您需要使用的内容。就我个人而言，我只提供如下几个函数/值：

export const UsersProvider = props => {
  const [user, setUser] = useState({
    isLogged: false
  });

  const props = {
    filteredUsers,
    setFilteredUsers
  };

  return (
    <UsersContext.Provider {...props}>
      {props.children}
    </UsersContext.Provider>
  );
};

但我只会在 props 对象的其他地方添加你需要的东西。我怀疑您是否需要其他地方的当前组件状态的所有内容，因为如果您这样做，您可能会遇到组织问题。

【讨论】：