Reactjs 使用React.Component样式将筛选列表传递给同级

有一个问题-下面的应用程序函数有一个“filteredUsers”方法，每次传递时都会执行该方法-因此，当设置搜索状态时，它实际上会运行该方法，并将其结果作为道具传递给“List”功能组件，一切正常。如何将其更改为旧样式React.Component，使其仍然有效？（根据我下面的尝试）

const-App=（）=>{
const[text，setText]=React.useState（“”）；
const[search，setSearch]=React.useState（“”）；
const handleText=（事件）=>{
setText（event.target.value）；
};
常量handleSearch=（）=>{
集合搜索（文本）；
};
console.log（'***App***'）；//每次我键入时都会显示
常量filteredUsers=users.filter（（用户）=>{
console.log（'Filter function is running…'）；//每次显示时
返回user.name.toLowerCase（）.includes（search.toLowerCase（））；
});
返回(
搜寻
);
};
常量列表=（{List}）=>{
返回(

{list.map（（项）=>(
))}

);
};
常量ListItem=（{item}）=>{
返回
{item.name}
；
};

然后在这个React.Component等价物（App3）中，我尝试这样做：
现在，当我点击搜索按钮时，如何获得传递给列表组件的过滤列表

类App3扩展了React.Component{
状态={
文本：“”，
搜索：“”，
}
HandletText（事件）{
this.setState（{text:event.target.value}）；
}
handleSearch（）{
this.setState（{search:this.state.text}）；
}
filteredUsers=用户。过滤器（（用户）=>{
log（'Filter函数正在运行…'）；
返回user.name.toLowerCase（）.includes（this.state.search.toLowerCase（））；
});
render（）{
返回(
搜寻
)
}
}

在您的第一个版本中，由于您的组件进行渲染，因此在每次渲染中，

filteredUsers

变量都会更新，因此您将获得过滤后的数据。您也可以在那里使用

usemo

，使它稍微好一点

在第二个（类组件）版本中，此变量未得到更新。因此，您可以将其设置为函数，并调用它来传递

列表

属性：

filteredUsers = () => // make function
  users.filter((user) => {
    console.log("Filter function is running ...");
    return user.name.toLowerCase().includes(this.state.search.toLowerCase());
  });

render() {
  return (
    <div>
      <input
        type="text"
        value={this.state.text}
        onChange={this.handleText.bind(this)}
      />
      <button type="button" onClick={this.handleSearch.bind(this)}>
        Search
      </button>

      <List list={this.filteredUsers()} /> // invoke
    </div>
  );
}

但是，如果不是强制性的，您应该使用第一个版本，因为类组件不再是新组件的选择

以下是带有

usemo

的版本：

const filteredUsers = React.useMemo(
  () =>
    users.filter((user) => {
      console.log("Filter function is running ..."); // each time this is shown
      return user.name.toLowerCase().includes(search.toLowerCase());
    }),
  [search]
);

在这种情况下，此变量仅在

search

更改时计算，而不是在每次状态更改时计算

const filteredUsers = React.useMemo(
  () =>
    users.filter((user) => {
      console.log("Filter function is running ..."); // each time this is shown
      return user.name.toLowerCase().includes(search.toLowerCase());
    }),
  [search]
);