玩转 React 【第03期】：邂逅 React 组件

Lin_R 发布于2019-08-23 12:55 / 2498人阅读

摘要：中组件可以将切分成一些的独立的可复用的部件。组件的返回值是一个需要在也页面上显示的元素，也就是说中组件必须有返回值。

上期回顾

前文我们讲解了 React 模板 JSX，接着我们继续来看看 React 组件又是如何工作的呢？

组件化开发到了今天已经是大家的共识，在 React 中，组件同样也是组成我们整个项目的基本单元。

react 中组件可以将UI切分成一些的独立的、可复用的部件。组件的返回值是一个需要在也页面上显示的 React 元素，也就是说 React 中组件必须有返回值。示例如下：

function Hello (props){
    return (
        Hello world
    
整个 Hello 就是一个组件，调用的时候，我们 可以直接 调用  就可以，另外这里要注意，组件的命名必须是首字母大写。
创建组件
在 React 中创建组件有三种方式：
1） 无状态的函数式组件； 
2） 基于ES5 的 React.createClass; 
3） 基于 ES6 的 extends React.Component；
这三种方式都可以去创建一个 React 组件，但是在实际的使用过程中有什么不同呢？我们具体来看。
函数式组件
函数式组件，是为了创建纯粹的展示组件，也就是说函数式组件一旦创建了就不能修改，除非它的父级修改了才会引起它的修改，这样的好处就是性能较高，内部没有太多的东西，如 state 和 声明周期，当然生命周期和state是什么我们后边再详细说，这里我们先大概了解，这俩东西主要是用来更改组件的内容，以及组件修改后的一系列处理的。
函数式组件的编写方式如下：
function Hello (props[,context]){
    return (
        Hello {props.name}
    , node)
return 中就是我们要显示在页面上的内容，props 是父组件传入的信息，context 是父祖中传入的信息，关于这两项的具体内容我们也放在下篇内容中详细的讲解。
除了上述内容之外，函数式组件还有以下几个特征：
1 组件不会被实例化，而是直接解析成 reactElemnt，整体渲染性能得到提升
2 没有实例化，自然在组件内部我们也不能使用 this
3 组件无法访问生命周期的方法，这个我们已经介绍过
4 组件没有state，只能访问 props
函数式组件由于其优良的性能，个人建议如果一个组件的内部我们不需要控制它进行改变的话，尽量还是使用 函数式组件
React.createClass
React.createClass 是一种基于 ES5 的创建组件的方式。本质就是一个工厂，在 React.createClass(配置对象) 放入我们的配置对象，然后它会帮我们返回一个 React 组件，
示例如下：
let Fn = React.createClass({
    render: function(){
        return (
            
                Hello React!
                Hello React!
                class属性
                style属性
            
        );
    }
});
上述是 React.createClass 的使用方式，但是要注意 React.createClass 方法 在React 16 之后就已经取消了，所以我们就不再讨论这个方法，直接来看 ES6 的写法。
React.Component
React ES6中，如果要声明一个类式组件，我们需要从 React.Component 继承过来，具体写法如下：
class Hello extends React.Component {
    render(){
        return (
            hello! {this.props.name}                
        );
    }
}
ReactDOM.render(
    
    document.querySelector("#app")
);
在使用 React.Component 的时候，有一些问题是需要我们注意的：

在 React.Component 中我们必须要定义一个 render 方法，这个方法中的返回值，就是最终我们要渲染到页面中 ReactElement 。
组件在实际调用的时候，会生成一个实例化对象，所以组件的方法中的 this 就指向这个实例化对象。
props 这个属性中存储的是我们调用时传入的属性，也是默认的第0个参数，所以组件中如果定义了 constructor， 必须 使用 super 继承，另外必须 把第 0 个参数传入去，示例如下：
最后强调一下，组件的命名必须首字母大写。

class Hello extends React.Component {
      constructor(props){
          super(props);
      }
      render(){
          return (
              hello! {this.props.name}                
          );
      }
  }

关于组件的创建我们就先介绍到这，在下一篇中，我们会详细的讲解 props,state 以及组件其他的相关知识。
——以上是笔者归纳总结，如有误之处，欢迎指出。
订阅号ID：Miaovclass
关注妙味订阅号：“妙味前端”，为您带来优质前端技术干货；           
               
                                           
                       
                 
            
                     
                 
                                                                                                                    
                         私有云
                                             
                         GPU服务器
                                                                                                                                                 
                                      
                     
                    
                                                                                               react
                                                                                                           _React
                                                                                                           React 源码
                                                                                                           react cdn
                                                         
                 
               
              
             
               
                    文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
                 
                   转载请注明本文地址：https://www.ucloud.cn/yun/99091.html
               
                      
               
                 
                                  上一篇：如何创建并发布一个 vue 组件  
                                                
                                       下一篇：React 源码深度解读（八）：事务 - Part 2

玩转 React【第02期】：恋上 React 模板 JSX

摘要：今天我们来看一种优雅的编写的代码的一种方式。有了之后，可以帮助我们在编写模板的时候结构更加简单清晰。以上是笔者归纳总结，如有误之处，欢迎指出。 showImg(https://segmentfault.com/img/bVbiT3u?w=900&h=383);往期回顾前文中我们讲解了利用 ReactElement 来编写React程序,但是我们也看到这种方式编写 React 特别的麻...

ivydom 2019-08-23 12:37 评论0 收藏0
FCC 成都社区·前端周刊第 6 期

摘要：详情发布新版本中可以自动修复和合并冲突的文件，还新增了命令。详情是一个用构建设计系统的开源工具，提供了一套基础应用程序开发的工具，模式和实践。目前，只有和的最新版本支持该属性。详情每周一同步更新到欢迎 01. JS 引擎 V8 v6.6 的更新最新 v6.6 版本的 V8 JavaScript 引擎更新了方法 Function.prototype.toString()，改进了代码缓存...

Airy 2019-08-30 14:21 评论0 收藏0
FCC 成都社区·前端周刊第 6 期

摘要：详情发布新版本中可以自动修复和合并冲突的文件，还新增了命令。详情是一个用构建设计系统的开源工具，提供了一套基础应用程序开发的工具，模式和实践。目前，只有和的最新版本支持该属性。详情每周一同步更新到欢迎 01. JS 引擎 V8 v6.6 的更新最新 v6.6 版本的 V8 JavaScript 引擎更新了方法 Function.prototype.toString()，改进了代码缓存...

Jiavan 2019-08-22 15:57 评论0 收藏0
FCC 成都社区·前端周刊第 6 期

摘要：详情发布新版本中可以自动修复和合并冲突的文件，还新增了命令。详情是一个用构建设计系统的开源工具，提供了一套基础应用程序开发的工具，模式和实践。目前，只有和的最新版本支持该属性。详情每周一同步更新到欢迎 01. JS 引擎 V8 v6.6 的更新最新 v6.6 版本的 V8 JavaScript 引擎更新了方法 Function.prototype.toString()，改进了代码缓存...

honhon 2019-08-02 10:06 评论0 收藏0
即将立秋的《课多周刊》(第2期)

摘要：即将立秋的课多周刊第期我们的微信公众号，更多精彩内容皆在微信公众号，欢迎关注。若有帮助，请把课多周刊推荐给你的朋友，你的支持是我们最大的动力。课多周刊机器人运营中心是如何玩转起来的分享课多周刊是如何运营并坚持下来的。即将立秋的《课多周刊》(第2期) 我们的微信公众号：fed-talk，更多精彩内容皆在微信公众号，欢迎关注。若有帮助，请把课多周刊推荐给你的朋友，你的支持是我们最大...

ruicbAndroid 2019-08-29 11:06 评论0 收藏0