Question

几个月前我开始研究react.js，然后我放弃了它。今天我又开始研究React了。阅读官方文档，我发现如何创建组件的语法已经改变。在过去，我学会了以这种方式创建一个组件：

reactComponentElement = React.createClass({
   render: function(){
      return <h1>Title</h1>;
   }
})

所以，使用React.createClass。

今天我在文档中看到，可以使用函数

实现组件的创建

function reactComponentElement(){
   return <h1>Title</h1>;
}

或与班级

class Clock extends React.Component {
   render() {
      return (
         <div>
            <h1>Hello, world!</h1>
         </div>
      );
   }
}

那么，我还可以使用React.createClass吗？

Answer 1

如果我在ES 5.1中编码，我仍然使用语法：

var ComponentName = React.createClass({
    render: function() {
        return (
            <some JSX />
        )
    }
})

但是，当我编写ES 6语法时，如果我想要一个＆＃39; smart＆＃39;那么我会使用extends声明。或基于类的组件（显示和混淆数据的组件）：

import React, { Component } from 'react'

class ComponentName extends Component {
    render() {
        return (
            <some JSX />
        )
    }
}

但并非每个组件都需要这些，我也可以在ES 6中声明功能组件（我将这些组件称为“dumb＆＃39;组件，因为我只是在屏幕上使用这些组件”）：

const ComponentName = () => {
    return (
        <some JSX />
    )
}

我在React文档中注意到ES5和ES 6语法之间存在不匹配（因为在某些页面中仍然在ES 5中，其他页面在ES 6中）。您可以在此处找到ES6语法：https://facebook.github.io/react/docs/react-component.html

Answer 2

在功能中

function reactComponentElement(){
   return <h1>Title</h1>;
}

你没有创建具有所有意义的反应组件 - 你只需返回一些JSX。类只在ES6及更高版本中可用，因此如果您在ES5中编码，则仍然必须使用React.createClass（）; React.Component

Answer 3

我强烈建议您仅使用函数组件（从props到html的函数）+ hooks。

它们易于推理，可以用于未来并且钩子使代码超级简单，重复使用起来不那么繁琐

在React.js中创建一个组件：＆＃34; React.createClass＆＃34;还有用吗？

3 个答案: