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

上一篇: react render渲染两次，一次为原... 下一篇:React-Redux 源码解析系列 -- Re...

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

发布时间：2019-06-30 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了玩转 React 【第03期】：邂逅 React 组件，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。


上期回顾

前文我们讲解了 React 模板 @L_304_1@，接着我们继续来看看 React 组件又是如何工作的呢？
组件化开发到了今天已经是大家的共识，在 React 中，组件同样也是组成我们整个项目的基本单元。

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


      
      
      PE="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="function Hello (PRops){
    return (
        Hello world
    
      
      
function Hello (props){
    return (<div>
        <h1>Hello world</h1>
    </div);
}
整个 Hello 就是一个组件，调用的时候，我们 可以直接 调用 <Hello /> 就可以，另外这里要注意，组件的命名必须是首字母大写。
创建组件
在 React 中创建组件有三种方式：

      
      
      
      
      
1） 无状态的函数式组件； 
2） 基于ES5 的 React.createClass; 
3） 基于 ES6 的 extends React.component；
这三种方式都可以去创建一个 React 组件，但是在实际的使用过程中有什么不同呢？我们具体来看。
函数式组件
函数式组件，是为了创建纯粹的展示组件，也就是说函数式组件一旦创建了就不能修改，除非它的父级修改了才会引起它的修改，这样的好处就是性能较高，内部没有太多的东西，如 state 和 声明周期，当然生命周期和state是什么我们后边再详细说，这里我们先大概了解，这俩东西主要是用来更改组件的内容，以及组件修改后的一系列处理的。
函数式组件的编写方式如下：

      
      
      ame}
    div);
}

ReactDOM.render(, node)" tITle="" data-original-title="复制">
      
      
function Hello (props[,context]){
    return (<div>
        <h1>Hello {props.name}</h1>
    </div);
}

ReactDOM.render(<Hello name="MiaoV" />, 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属性
            
        );
    }
});" title="" data-original-title="复制">
      
      
let Fn = React.createClass({
    render: function(){
        return (
            <div>
                <h1 id="title">Hello React!</h1>
                <h2 id={title}>Hello React!</h2>
                <h2 classname="box">class属性</h2>
                <h2 style={ {background: 'red'} }>style属性</h2>
            </div>
        );
    }
});
上述是 React.createClass 的使用方式，但是要注意 React.createClass 方法 在React 16 之后就已经取消了，所以我们就不再讨论这个方法，直接来看 ES6 的写法。
React.COMponent
React ES6中，如果要声明一个类式组件，我们需要从 React.Component 继承过来，具体写法如下：

      
      
      this.props.name}                
        );
    }
}
ReactDOM.render(
    
    document.querySelector('#app')
);" title="" data-original-title="复制">
      
      
class Hello extends React.Component {
    render(){
        return (
            <h1>hello! {this.props.name}</h1>                
        );
    }
}
ReactDOM.render(
    <Hello name = "MiaoV" />
    document.querySelector('#app')
);
在使用 React.Component 的时候，有一些问题是需要我们注意的：

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


      
      
      constructor(props){
          super(props);
      }
      render(){
          return (
              hello! {this.props.name}                
          );
      }
  }
" title="" data-original-title="复制">
      
      
class Hello extends React.Component {
      constructor(props){
          super(props);
      }
      render(){
          return (
              <h1>hello! {this.props.name}</h1>                
          );
      }
  }

关于组件的创建我们就先介绍到这，在下一篇中，我们会详细的讲解 props,state 以及组件其他的相关知识。
——以上是笔者归纳总结，如有误之处，欢迎指出。
订阅号ID：Miaovclass
关注妙味订阅号：“妙味前端”，为您带来优质前端技术干货；