react的组件创建的方式

相对vue来说，react的组件的创建方式，不再安装全局和局部划分。大致分为：

1. 函数式定义的无状态组件
2. es5原生方式React.createClass定义的组件
3. es6形式的extends React.Component定义的组件

---

1.无状态组件

创建纯展示组件，只负责根据传入的props来展示，不涉及到要state状态的操作，是一个只带有一个render方法的组件类

创建的方式如下所示：

 function Hello() {
        return <h1>我是一个组件！</h1>;
      }
ReactDOM.render(<Hello />, document.getElementById("app"));

ps:

使用function定义组件的时候需要一个返回值,返回值为页面显示的内容

在新版本的react中function定义的组件也可以有局部状态和生命周期  对于局部状态的设置用的是

用function定义组件就不需要考虑this问题

通过useState可以在function中定义一个局部状态,接收一个参数为状态的默认值

返回值为两个

第一个为定义的状态的名字

第二个为改变状态的方法

优点：

• 组件不会被实例化，整体渲染性能得到提升
• 组件不能访问this对象
• 组件无法访问生命周期的方法
• 无状态组件只能访问输入的props，同样的props会得到同样的渲染结果，不会有副作用

参考链接：https://www.jianshu.com/p/f5c9ec0917bb