react 之 无状态组件

在React中创建组件有三种方式：

1. es5写法:React.createClass
2. es6写法：React.Component
3. 无状态函数写法，又称为纯组件SFC

无状态组件的优势：

1. 代码简洁，易读
2. 无状态，无this，无需绑定
3. 便于测试
4. 性能高

无状态的函数创建的组件是无状态组件，它是一种只负责展示的纯组件：

function Hello(props){
    return (<div>Hello {psops.name}</div>)
}
ReactDOM.render(<Hello/ name='marlon'>,document.getElementById(''))

对于这种无状态的组件，使用函数式的方式声明，会使得代码的可读性更好，并能大大减少代码量，箭头函数则是函数式写法的最佳搭档：

const App=(props)=>(
    <div>hello 函数式声明{props.name}</div>
)
ReactDOM.render(<App name="hello"/>,document.getElementById(''))

• 如果用到页面展示，可以用无状态组件，加载比较快
• React内部分别使用了props, state来区分组件的属性和状态。props用来定义组件外部传进来的属性, 属于那种经过外部定义之后, 组件内部就无法改变。而state维持组件内部的状态更新和变化, 组件渲染出来后响应用户的一些操作,更新组件的一些状态。如果组件内部状态不需要更新,即没有调用过this.setState, 全部通过props来渲染也是没问题的, 不过这种情况不常见。