React11组件的写法

一、组件的写法

• 展示组件:

          负责根据props显示页面信息

• 容器组件：

           负责数据的获取、处理

• 分清楚展示组件和容器组件的优势

          《1》分离工作组件和展示组件

          《2》提高组件的重用性

          《3》提高组件可用性和代理阅读

          《4》便于测试和后续的维护

 

二、函数式组件

　　

• 函数式组件是一种无状态组件，是为了创建纯展示组件，这种组件只负责根据传入的props来展示，不涉及到要state状态的操作
• 组件不会被实例化，整体渲染性能得到提升
• 组件不能访问this对象
• 组件无法访问生命周期的方法
• 无状态组件只能访问props，同样的props会得到同样的渲染结果，不会有副作用
• 官网文档说：在大部分React代码中，大多数组件被写成无状态的组件，通过简单组合可以构建其它的组件等，这种通过多个简单然后合并成一个大应用的设计模式被提倡。
• 具体写法如下：

            

 三、Class组件的写法

• React.createClass是react刚开始推荐的创建组件的方式，现在基本不会见到了
• React.Component是以ES6的形式来创建react的组件的，是React目前极为推荐的创建有状态组件的方式

            《1》在里面我们可以写入我们的状态、生命周期、构造函数等

            《2》具体使用如下所示：