创建一个无状态的组件
let ReactClass = React.createClass({
render: ()=>{
return React.createElement('h1',{className:'header'},'React Component')
}
});
let reactComponentElement = React.createElement(ReactClass);
let reactComponent = ReactDOM.render(reactComponentElement), document.getElementById('react-application'));
创建组件就是三个步骤
- 调用React.createClass()创建一个组件类ReactClass，参数是一个对象，定义组件。render方法是必须
- 调用React.createElement(ReactClass) ，创建一个reactComponentElement。ReactClass作为type参数
- 调用ReactDOM.render()渲染组件
组件状态的一种设计模式
- 状态不要直接保存在render()中
- 尽可能保持一些React组件无状态。
3.组件的两个关注点：如何处理页面交互逻辑和如何呈现数据。 - React组件是可以分层的，少数有状态的组件应该为位于层级的顶部。它们封装了所有的交互逻辑，管理用户页面状态，然后使用props（之后将使用state）将状态向下传递到无状态的组件。
创建一个有状态的组件
let ReactClass = React.createClass({
getInitialState:{
return{
isHidden :false
}
},
render: ()=>{
if(this.state.isHidden){
return null
}
return React.createElement('h1',{className:'header'},this.props.header)
}
});
this.props vs this.state
- this.props 是一个从父组件传递过来的只读数据，属于父级别，不能被子元素改变。
- this.state 存储的数据是组件私有的，能被组件修改。并且更新后会自动重新渲染组件。
更新组件state -setState(data,callback)
- data :表示下一个状态
- callback：很少用到，因为React已经保证用户界面是最新的了：每次组件状态更新的时候，就会重新调用render函数。
一条经验法则
组件的state应该用来存储组件的事件处理函数随时可能改变的数据
