防止 useState 重新渲染组件答案

【问题标题】：Prevent useState re-rendering Component防止 useState 重新渲染组件
【发布时间】：2021-01-07 15:47:36
【问题描述】：

我有一个 TextField，它在更改时使用 useState 更新状态。我面临一个问题，即在状态更改后整个组件都会重新渲染，我希望只有 TextField 会更改。

const Uploader = ({ onUploadComplete }) => {

const [fields, setFields] = useState({});
const handleName = (event) => {
  const { name, value } = event.target;
  setFields((fields) => ({
    ...fields,
    [name]: { value: value },
  }

  <React.Fragment>
    <Grid item xs={4}>
      <Card>{console.log('Card Media Rendered')}</Card>
    </Grid>
    <Grid item xs={8}>
      <FormControl fullWidth>
        <TextField
          value={fields[file.id]?.value || ''}
          onChange={handleName}
        />
      </FormControl>
    </Grid>
  </React.Fragment>
}

【问题讨论】：

状态改变会导致组件重新渲染，这就是它的工作原理。
这是整个组件吗？这里似乎还有其他一些问题。就像Uploader不返回任何东西一样。
对不起，我应该说这段代码为了便于阅读而被修剪了

标签： reactjs use-state

【解决方案1】：

您需要像这样在功能组件内移动useState：

const Uploader = ({ onUploadComplete }) => {
  const [fields, setFields] = useState({});
  const handleName = (event) => {
    const { name, value } = event.target;
    setFields((fields) => ({
      ...fields,
      [name]: { value: value },
    }))
  }
  
  return (
    <React.Fragment>
      <Grid item xs={4}>
        <Card>{console.log('Card Media Rendered')}</Card>
      </Grid>
      <Grid item xs={8}>
        <FormControl fullWidth>
          <TextField
            value={fields[file.id]?.value || ''}
            onChange={handleName}
          />
        </FormControl>
      </Grid>
    </React.Fragment>
  )
}

您的组件确实重新渲染了，因为它所依赖的变量不在反应范围内。所以它不能只触发对文本字段的更新

【讨论】：

您能进一步解释一下吗？
当然，就像你在 Class 组件中“构造”你的状态一样，你应该在功能组件中使用 useState 钩子。请参阅此处：reactjs.org/docs/hooks-state.html React 的目标重新渲染适用于其组件上下文中的依赖项。这意味着如果您在渲染方法（或功能组件的返回）中使用窗口变量（不是状态变量），它将触发对整个组件的重新渲染。
你可以在这里阅读更多：reactjs.org/docs/hooks-state.html
抱歉代码格式不正确，usestate 已经在组件内
如何检查组件是否正在重新渲染？