React 组件编写

react组件有三种编写方式,这里介绍两种比较普遍流行的编写方式.

一·无状态函数定义组件

我们之所以称这种类型的组件为函数定义组件，是因为从字面上来看，它就是一个JavaScript函数。

#组件编写:
import React from 'react';

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>
}
export default Welcome

#组件调用:
import React from 'react';
import Welcome from './welcome';

class App extends Component {
       render() {
            return (
                <div className="App">
                   <header className="App-header">
                        <Welcome name='我是function无状态组件'/>
                   </header>
                </div>
              );
         }
  }

二.ES6 class组件

#组件编写
import React from 'react';

class Tick extends React.Component {
  render() {
    return <h1>我是 {this.props.name}</h1>;
  }
}

export default Tick

#调用方式
import React from 'react';
import Tick from './tick';


class App extends Component {
  minter() {
    return <Tick name="React.Component组件方式" />
  }
  render() {
    return (
      <div className="App">
        <header className="App-header">
          {this.minter()}
          <Welcome name='我是function无状态组件'/>
        </header>
      </div>
    );
  }
}

export default App;

三.两种组件的区别

无状态函数组件:

组件不会被实例化，整体渲染性能得到提升

因为组件被精简成一个render方法的函数来实现的，由于是无状态组件，所以无状态组件就不会在有组件实例化的过程，无实例化过程也就不需要分配多余的内存，从而性能得到一定的提升。

组件不能访问this对象

无状态组件由于没有实例化过程，所以无法访问组件this中的对象，例如：this.ref、this.state等均不能访问。若想访问就不能使用这种形式来创建组件

组件无法访问生命周期的方法

因为无状态组件是不需要组件生命周期管理和状态管理，所以底层实现这种形式的组件时是不会实现组件的生命周期方法。所以无状态组件是不能参与组件的各个生命周期管理的。
无状态组件只能访问输入的props，同样的props会得到同样的渲染结果，不会有副作用

ES6 Class组件:

简洁

组件能访问this对象

组件有访问生命周期的方法