组件，Hooks和性能

应该怎么选择呢？在大数情况下用受控组件是可行的，不过也有一些例外。例如使用非受控制组件的一种情况是 file 类型输入，因为它的值是只读的，不能在编码中去设置（需要用户交互）。另外我发现受控组件更容易理解和于使用。对受控组件的验证是基于重新渲染的，状态可以更改，并且可以很轻松的显示输入中存在的问题（例如格式错误或者输入为空）。

Refs

在前面我们提到过 refs，这是一个特殊功能，可以在类组件中使用，直到 16.8 中出现了 hooks。

refs 可以通过引用让开发人员访问 React 组件或DOM元素（取决于我们附加 ref 的类型）。***仅在必须的场景中使用它们，因为它们会使代码难以阅读，并打破从上到下的数据流。然而，有些情况下它们是必要的，特别是在DOM元素上（例如：用编码方式改变焦点）。附加到 React 组件元素时，你可以自由使用所引用的组件中的方法。不过还是应该避免这种做法，因为有更好的方法来处理它（例如，提升状态并将功能移动到父组件）。

refs 还可以做到：

•  使用字符串字面量（历史遗留的，应该避免），
•  使用在 ref 属性中设置的回调函数，
•  通过创建 ref 作为 React.createRef() ，并将其绑定到类属性，并通过它去访问（请注意，在 componentDidMount 生命周期中将提供引用）。

没有传递引用的一种情况是当在组件上使用高阶组件时 —— 原因是可以理解的，因为 ref 不是 prop（类似于 key）所以它没有被传递下来，并且它将引用 HOC 而不是被它包裹的组件。在这种情况下，我们可以使用React.forwardRef，它把 p复杂，出现问题的概率就越高。这就是为什么 React 中会有错误边界。那他们是怎么工作的呢？

如果出现问题并且没有错误边界作为其父级，则会导致整个React 应用失败。不显示信息比误导用户并显示错误信息要好，但这并不意味着你应该放任整个应用崩溃并显示白屏。通过错误边界，可以得到更多的灵活性。你可以在整个应用程序中使用并显示一个错误消息，或者在某些小部件中使用它但是不显示，或者显示少量信息来代替这些小部件。

请记住，它仅涉及声明性代码的问题，而不是你为了处理某些事件或者调用而编写的命令式代码。对于这些情况，你仍应使用常规的 try/catch 方法。

在错误边界也可以将信息发送到你使用的 Error Logger （在 componentDidCatch 生命周期方法中）。

（编辑：PHP编程网 - 黄冈站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!