Question

我在Typescript中使用ReactJS。我需要下面的“构造函数”代码吗？它没有它工作正常，我查看了转换后的JavaScript，无论如何它似乎都会自动添加。

interface myProps {
   children?: any;
}
class MyButton extends React.Component<myProps, {}> {
    constructor(props: myProps) { //Needed ???
        super(props);
    }

    render() {
        return (<div>
            <button>
                {this.props.children}
            </button>
        </div>);
    } //end render.
} //end class.

Answer 1

不，你不需要。

事实上，您可以将这样的简单组件编写为函数。

const MyButton = (props) => {
  return (
    <div><button>{props.children}</button></div>
  );
};

Answer 2

如接受的答案所述：

const MyButton = (props) => {
  return (
    <div><button>{props.children}</button></div>
  );
};

这可行，但它不一样 - 根本不是。这是构造一个StatelessComponent（没有状态，没有生命周期钩子，它只是一个普通的函数，只返回JSX或“render”函数的一部分）。

如果你需要状态或生命周期钩子，你必须从React.Component扩展 - 就像在问题中已经完成一样。

要真正回答你的问题 - 是的，需要构造函数。那是因为你正在扩展现有的类，它已经要求必须在构造上给出一个初始属性（“props”） - ＆gt;因为它是一个反应类，反应将在内部调用类似

new MyButton(props);

他将始终将props对象提供给实例化的Component。现在，通过扩展现有的反应组件类，您必须实现相同的目标 - 否则您最终会错过“道具”对象。为了使它成为可能，那个仍然可以将“道具”传递给你新定义的组件，你必须在你的构造函数上定义道具，所以你必须写这个：

constructor(props: myProps) { .. }

否则，当您调用“new MyButton（props）”时，您无法传递任何内容 - ＆gt;好吧，这不会除了或带来错误，但“道具”只会在你的“MyButton”的进一步代码中为“null”。

最后但并非最不重要 - 您必须在扩展版本中调用“超级”。

super(props);

否则，您不会将给定的“prop”对象传递给您要扩展的基本类。在这里，它可以在没有它的情况下工作，但是 - 在“React.Component”本身的任何代码中，“props”将为“null”。

所以，是的，这是必要的！

基本上你可以通过简单地使用调试器来自己回答这个问题 - 只需打开你的web-dev工具，跳转到你的组件代码，在你的构造函数中创建一个断点，仔细观察发生了什么以及传递了什么;）然后，删除构造函数中的属性一次..并删除一次超级调用...它将如何除以/分开？ ;）

更新

在创建新的反应组件时，您可以随时问自己的另一个问题：我需要状态吗？我需要lifecycleHooks吗？

如果其中一个是肯定的，你将不得不从React.Component扩展 - 因为只有基本类才会给你这个糖。但是可以说，不，我不需要任何这些 - 总是使用StatelessComponent：

const MyComp = (props) => (
  <div></div>
)

并尝试避免本地组件状态 - 你可以通过一个全局状态槽react-redux和selectors做得更好;）

Answer 3

构造函数和Super不再需要做出反应。可以在没有构造函数的情况下定义State，生命周期钩子也可以正常工作。这是Babel以这种方式转换组件的结果：http://2ality.com/2017/07/class-fields.html

在传统的ES6中，目前情况并非如此。

Answer 4

今天，仅当您必须使用props的状态初始化组件时，才需要构造函数。

import React from 'react'

class AChildComponent extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      myState: props.myStateFromProps
    }
  }

  render(){
    return(
      <div>
        <p>{this.state.myState}</p>
      </div>
    )
  }
}

export default AChildComponent

是ReactJS组件类需要构造函数

4 个答案: