自定义组件怎么处理 props 变化才最合理？

Designer°风珍提问于 2026-03-05 17:32:21 阅读 2

组件

我写了个带搜索功能的下拉组件，但父组件传进来的 options 更新后，下拉列表没反应。是不是该用 useEffect 监听 props 啊？

试过直接在 render 里用 props.options 渲染，但数据变了 UI 不更新。加了 useEffect 又担心性能问题，不知道最佳实践是啥。

function SearchableSelect({ options, onSelect }) {
  const [filteredOptions, setFilteredOptions] = useState(options);

  // 这样写对吗？
  useEffect(() => {
    setFilteredOptions(options);
  }, [options]);

  return (
    <div>
      {filteredOptions.map(opt => (
        <div key={opt.id} onClick={() => onSelect(opt)}>{opt.label}</div>
      ))}
    </div>
  );
}

自定义组件

我来解答赞 1 收藏

反馈

1 条解答

欧阳治霞 Lv1

你的写法是对的，用useEffect监听props变化并更新state是标准做法。性能问题可以加个深比较优化，就这样：

useEffect(() => {

  if(JSON.stringify(options) !== JSON.stringify(filteredOptions)) {

    setFilteredOptions(options);

  }

}, [options]);

2026-03-05 18:02