这是 React 中高阶组件 (HOC) 的有效实现吗?

Question

>我昨天问了这个问题：跨组件的 React 共享方法

import React from 'react';
class LoginForm extends React.Component {
constructor(props) {
super(props);
this.state = {
email: '',
password: '',
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(e) {
const target = e.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
const name = target.name;
this.setState({
[name]: value
});
}

由于我在整个应用程序中多次重用handleChange(e)，因此我决定将其分离为高阶组件，如下所示：

import React from 'react';
const withHandleChange = (WrappedComponent) => {
return class extends React.Component {
constructor(props) {
super(props);
this.state = {
};
}
handleChange = e => {
const target = e.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
const name = target.name;
this.setState({
[name]: value
});
}
render() {
return (
<WrappedComponent
handleChange={this.handleChange}
form={this.state}
{...this.props}
/>
);
}
}
};
export default withHandleChange;

我现在没有让 HOC 完成LoginForm维护输入字段的状态，而是将此状态作为名为form的道具传递。我也把handleChange方法作为道具传了下来。

在原始LoginForm组件中，我渲染以下内容：

<input type="text" placeholder="Email" name="email" value={this.props.form.email} onChange={this.props.handleChange} />

我这样包装LoginForm：

const WrappedLoginForm = withHandleChange(LoginForm);
const LoginBox = props => (
<div className="login-box">
<WrappedLoginForm />
</div>
);

这是一个有效的实现吗？我主要关注的两个问题是 (1( 将状态作为withHandleChange定义中WrappedComponent的道具传递，以及 (2( 渲染WrappedLoginForm因为我已经读到你不应该在渲染方法中使用 HOC。

至于(1(，这有效吗？有没有更好的方法来完成我正在做的事情？

至于 (2(，我认为他们的意思是我不应该在渲染方法中运行 HOC函数，但简单地使用包装的组件(就像我现在所做的那样(应该没问题。但是，我有点困惑，希望得到一些确认。

任何和所有建议都会有所帮助。谢谢！

Answer 1

由于以下表达式，不允许在渲染生命周期中使用 HOC

const WrappedLoginForm = withHandleChange(LoginForm);

声明一个组件。而且您知道，渲染生命周期可能会执行多次，具体取决于您的应用究竟发生了什么。然后，它会导致多次执行包装组件的声明，这可能会导致意外行为。我认为这是它被禁止的根本原因。

为了避免这种错误，强烈建议在内部组件导出(或导入(的位置声明包装的组件。喜欢： 登录表单.js

export default withHandleChange(LoginForm)

或

import LoginForm from 'somewhere'
const WrappedLoginForm = withHandleChange(LoginForm);