React Select 总是重新渲染，即使改变另一个状态

Question

React Select 始终重新渲染，即使更改另一个状态也是如此。

...
  const [expense_currency, setExpenseCurrency] = React.useState(expense_claim.expense_currency);
  const [remarks, setRemarks] = React.useState(expense_claim.remarks);
  ...
  ...
  return (
     ...
        <div className="form-group row p-0 col-sm-12 col-md-6">
           <label className="text-nowrap col-form-label col-sm-4">Currency</label>
           <div className="col-sm-8 p-0" title={expense_currency}>
              <Select
                  className="select2"
                  placeholder="Select Currency"
                  isDisabled={false}
                  isClearable={true}
                  value={expense_currency}
                  options={select_currency}
                  onChange={selected => { setExpenseCurrency(selected.value) }}
              />
           </div>
        </div>
        <div className="form-group row p-0 col-sm-12 col-md-6">
           <label className="text-nowrap col-form-label col-sm-4">
              Remarks
           </label>
           <div className="col-sm-8 p-0">
              <textarea
                 className="form-control"
                 required={true}
                 disabled={false}
                 name="remarks"
                 placeholder=""
                 defaultValue={remarks}
                 onChange={e => setRemarks(e.target.value)}
              ></textarea>
          </div>
      </div>
  )

来自我的 chrome React 分析器的 SS

我试过 react-select v2.0.0 到 v.2.4.4 都有相同的结果。我可以知道如何让它在我更新备注字段时不重新呈现吗？

Answer 1

这取决于 Select 是否使用 PureComponent 或 memo() 或类似的东西。但是，如果它是你传入的道具，那么每次都会破坏检查，因为你在每次渲染时都为 onChange 创建回调。

要获得一致的回调参考，请使用 useCallback:

const onSelectChange = useCallback(selected => setExpenseCurrency(selected.value), [setExpenseCurrency]);

并传入：

onChange={onSelectChange}

如果 select_currency 是非原始类型，例如数组或对象，您将需要确保它们也是一致的引用。你没有 post 所以不能提供建议。

React Select 总是重新渲染，即使改变另一个状态

React Select Always re-render, even when change another state

reactjs

react-select

react-hooks