Question

我是那种在Javascript语言中看不到“class”关键字的人，因为我认为它不适合底层对象模型。为了创建对象，我也更喜欢工厂而不是“新”和构造函数。

此外，我真的很喜欢React。所以我想出了一种定义组件的方法，它完全避免了整个“类”和“扩展”的东西，只使用功能组件或组件工厂。它还完全避免了必须绑定类方法或使用定义为箭头函数的棘手类属性（对于定义为类方法的事件处理程序）。

在描述它之前，我的问题是：使用这种语法是否适合未来，或者有一天React会强迫我使用我不赞同的语法吗？

以下是根据需要定义组件的方法：

仅依赖于其道具的组件被编写为功能组件（返回JSX的函数）：

const Comp = (props) => (
  <p> Hey { props.name } </p>
);
Comp.propTypes = {
  name: PropTypes.string.isRequired
};

一个人想要使用生命周期钩子但不维护任何状态的组件被写为一个函数，它创建并返回一个对象，其成员是道具，所需的生命周期方法和渲染方法：

const Comp = (props) => ({
  props,

  componentWillMount() {
    this.props.doSomething();
  },

  render() {
    return (
      <p> Hey { this.props.name } </p>
    );
  }
});
Comp.propTypes = {
  doSomething: PropTypes.function.isRequired,
  name: PropTypes.string.isRequired
};

需要维护状态的组件被写为一个函数，它创建并返回一个对象，其原型是React.Component（获取setState函数），其成员是props，state，所需的生命周期方法和渲染方法。接口调用的函数在此工厂函数闭包中定义，并使用组件实例直接作用于组件（主要是setState）（此处没有绑定问题）：

const Comp = (props) => {
  const comp = Object.create(React.Component.prototype);

  const handleClick = () => {
    comp.setState((prevState) => ({ value: prevState.value + 1 }));
  };

  return Object.assign(comp, {
    props,

    state: { value: 4 },

    componentWillUpdate() {},

    render() {
      return (
        <p> Hey { this.props.name } </p>
        <p> Value: { this.state.value } </p>
        <button onClick={ handleClick }> Increment </button>
      );
    }
  });
};
Comp.propTypes = {
  name: PropTypes.string.isRequired
};

反应替代组件定义语法

0 个答案: