是ReactJS组件类需要构造函数

时间:2016-02-16 19:45:41

标签: reactjs typescript

我在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.

4 个答案:

答案 0 :(得分:3)

不,你不需要。

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

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

答案 1 :(得分: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做得更好;)

答案 2 :(得分:1)

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

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

答案 3 :(得分:0)

今天,仅当您必须使用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