主页 / 问题 / 637479
Accepted
vvitto
Asked:2020-03-10 03:25:20 +0000 UTC2020-03-10 03:25:20 +0000 UTC

React.createClass 和 class extends React.component 有什么区别？

  • 772

我最近开始通过视频教程学习 React。我试图在上面写下各种各样的“东西”，并以某种方式偶然发现了用这个例子翻译成俄语的官方文档：

class Form extends React.Component {
    constructor(props) {
        super(props);
        this.state = {value: ''};
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(event) {
        this.setState({value: event.target.value});
    }

    handleSubmit(event) {
        alert('Text field value is: ' + this.state.value);
    }

    render() {
        return (
                <div>
                    <input type="text"
                     placeholder="Hello!"
                     value={this.state.value}
                     onChange={this.handleChange} />
                    <button onClick={this.handleSubmit}>
                        Submit
                    </button>
                 </div>
             );
    }
}

 ReactDOM.render(
     <Form />,
     document.getElementById('root')
 );

在我学习的视频课程中，它有点不同，即：

  1. 从通常的 React.createClass() 继承 class Form extends React.Component 创建组件有什么区别？
  2. 为什么 this 在没有它的情况下工作时使用 bind 绑定在类构造函数中？
  3. 一般来说，文档中的代码比我的代码有什么优势？（以下）
var Form = React.createClass({
    getInitialState: function(){
        return {
            value: ""
        }
    },
    handleChange(e){
        this.setState({value: e.target.value});
    },
    handleSubmit(e){
        alert("Text field value is: " + this.state.value);
    },
    render: function(){
            return (
                <div>
                    <input type="text"
                     placeholder="Hello!"
                     value={this.state.value}
                     onChange={this.handleChange} />
                    <button onClick={this.handleSubmit}>
                        Submit
                    </button>
                 </div>
             );
    }
});

ReactDOM.render(
        <Form />,
        document.getElementById('root')
);

提前致谢：3

javascript

2 个回答

  1. Best Answer

    这是做同一件事的两种方法。
    Facebook 本身认为 es6 类在语义上更正确，并且认为在遥远、幸福的未来某个时候，将停止对 React.createClass 的支持（来源，第一段）。但它不会在未来一两年内出现，它createClass甚至还没有被弃用。

    第三个问题的答案：到目前为止，这是两种等效的方式。
    习惯了写es6类就好了，但是以后会怎么样其实很难预料。

    主要区别：

    1. 类是 es6 的一个特性。因此，你必须拥有所有转译器的魔力才能使用 es6 进行全面的工作。

    2. React.createClass在内部，神秘的魔法会自动绑定传递给createClass它的所有方法。在es6 classes的组件中，他们决定放弃这样的东西，因为它经常让开发者感到困惑，你需要用句柄来绑定它。顺便说一句，第二个问题的答案如下：没有这个，它就不起作用。

    3. es6 类组件中没有 mixins。开发 React 的贤者委员会认为 mixins 不好，组合很好。我决定不给在新版本中写得不好的机会。

    4. 相反，它getInitialState被使用constructor是因为它被认为更适合 es6 类，它也是propTypes类本身的属性，而不是方法，而是类getDefaultProps的属性defaultProps

    也许还有一些我不记得的其他差异，就我个人而言，在我的工作项目中，我在旧代码中有 createClass，在新代码中有 es6 类。getInitialState autobinding 和 propTypes 是明显的区别，es6 通常已经存在，mixins 很少使用。

    • 15

  2. 新开发人员React在面对两种不同的React. 生态系统目前React在组件声明之间分裂React.createClass：

    const MyComponent = React.createClass({
  render() {
    return(<p>I am a component!</p>);
  }
});

    和类组件声明ES6：

    class MyComponent extends React.Component {
  render() {
    return(<p>I am a component, too!</p>);
  }
}

    React.createClass类组件和之间有什么区别ES6？为什么它们都存在？

    作为原型语言，JavaScript它存在的大部分时间都没有类。, 2015 年 6 月完成ES6的最新版本引入了 classes like .JavaScriptсинтаксический сахар

    类语法没有向 JavaScript 引入新的面向对象的继承模型。JavaScript 类为创建对象和处理继承提供了更简单、更清晰的语法。

    由于JavaScript它没有课程，因此它React包含了自己的课程系统。React.createClass允许您创建类组件。在底层，您的 coclass 使用在React.

    WithES6 React允许您实现使用JavaScript ES6. 最终结果是一样的——你有一个组件类。但风格不同。一个使用自定义类系统JavaScript (createClass)，而另一个使用本机类系统JavaScript。

    社区已经切换到类组件ES6。这是有充分理由的。它使用createClass是因为它没有JavaScript内置的类系统。但它ES6很快就被接受了。使用ES6，而不是重新发明轮子，React您可以使用一个简单的ES6 JavaScript.

    ES6-классами对于开发人员来说，幸运的是，使用和创建的组件之间的差异React createClass很小。如果您已经学习了如何使用 编写组件React，createClass并且曾经想使用类ES6，您将很容易找到过渡。

    • 3

相关问题