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会得到同样的渲染结果，不会有副作用
