算是一点个人笔记吧
看到觉得不妥之处的话随时欢迎提issue或者pr
起手
我本以为我短时间内不会学react的,毕竟我是那么的深爱vue(你给我住口!
在上一篇还是在为vue提pr,这一篇立马变成react入门的情况下好像并没有太大的说服力,可是陆金所真的没有vueQAQ
为了不被公司赶出去,行叭!学就学叭!
几种创建react组件的方式
- 函数式的定义的无状态组件
React.creatClass
extends React.Component
第一种,简单的无状态组件:1
2
3
4function Hello() {
return <div>`hello${props.name}`</div>
}
ReactDOM.render(<Hello name="bibi" />, mountNode)
无状态组件一般为纯展示用组件,不涉及到state以及交互,无状态的函数式组件只根据传入的props进行展示。
只要有可能,尽可能地使用无状态组件
第二种,creatClass方式:1
2
3
4
5
6
7
8
9
10var Hello = React.creatClass({
getInitialState: function() {
return {
name: 'bibi'
}
}
render: function() {
return <div>`hello${this.name}`</div>
}
})
第三种,es6的calss方式1
2
3
4
5
6
7
8
9
10
11class Hello extends React.Component {
constructor(props) {
super(props);
this.state = {
name: 'bibi'
}
}
render() {
return <div>hello, {this.name}</div>
}
}
二和三被称为有状态组件,有着内部的状态state
,放在getInitialState
中,以class
创建的方式,state
直接写在constructor
内即可。
现今开发中最常用为第三种,同时react组件必须 大写开头
生命周期
getDefaultProps()
设置默认的propsgetInitialState()
获取自身组件的state,es6中直接放到了constructor
定义state,使用this.state
就可以访问。componentWillMount()
在挂载前触发,一般来说只会触发一次,可以在这里访问state。render()
创建虚拟dom,进行diff算法,而且更新dom树也采用此方法,在挂载后更新state
也会重新触发此方法。componentDidMount()
挂载后调用。componentWillReceiveProps(nextProps)
在获得新的props
时候调用,可以访问到此时的props
和新的props
。shouldComponentUpdate(nextProps, nextState)
组件接受新的state或者props时调用,返回false时会阻止更新componentWillUpdata(nextProps, nextState)
组件即将更新时调用。componentDidUpdate()
完成更新时调用。componentWillUnmount()
即将卸载时调用。