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

#1

上期回顾

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

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

function Hello (props){
    return (<div>
        <h1>Hello world</h1>
    </div);
}

整个 Hello 就是一个组件，调用的时候，我们 可以直接 调用 就可以，另外这里要注意，组件的命名必须是首字母大写。

创建组件

在 React 中创建组件有三种方式：
1） 无状态的函数式组件；
2） 基于ES5 的 React.createClass;
3） 基于 ES6 的 extends React.Component；

这三种方式都可以去创建一个 React 组件，但是在实际的使用过程中有什么不同呢？我们具体来看。

函数式组件

函数式组件，是为了创建纯粹的展示组件，也就是说函数式组件一旦创建了就不能修改，除非它的父级修改了才会引起它的修改，这样的好处就是性能较高，内部没有太多的东西，如 state 和 声明周期，当然生命周期和state是什么我们后边再详细说，这里我们先大概了解，这俩东西主要是用来更改组件的内容，以及组件修改后的一系列处理的。
函数式组件的编写方式如下：

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 (
            <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 继承过来，具体写法如下：

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 个参数传入去，示例如下：
  • 最后强调一下，组件的命名必须首字母大写。
class Hello extends React.Component {
      constructor(props){
          super(props);
      }
      render(){
          return (
              <h1>hello! {this.props.name}</h1>                
          );
      }
  }

关于组件的创建我们就先介绍到这，在下一篇中，我们会详细的讲解 props,state 以及组件其他的相关知识。

——以上是笔者归纳总结，如有误之处，欢迎指出。

订阅号ID：Miaovclass

关注妙味订阅号：“妙味前端”，为您带来优质前端技术干货；

1 Like