React从零到一Demo演练(下)
废话
这一部分比前一篇难懂些,但是还是的了解、掌握,至于用嘛,后面自己在好好研究,由于写这套教程时候我才学习一个周,所以可能有错的地方,多包涵。
React API
React的Api有很多,这里为了后面AntD的上手,就简单介绍6个,够用就行,分别是:
- 设置状态:setState
- 替换状态:replaceState
- 设置属性:setProps
- 替换属性:replaceProps
- 强制更新:forceUpdate
我们一一来看一下:
setState
在之前的样例中有简单的使用,我们再来看一下:
setState(object nextState[, function callback])
eg:
this.setState({count : this.state.count+1},()=>{
//回调需要处理的业务逻辑
})
大概就是这样,但是需要注意:callback回调函数必须是state设置成功 且 组件渲染完毕才会触发
replaceState
该方法会替代当前的state,然后设置新的state,原有的state会被全部删除,后面也是回调函数
这个在之前的demo中没有出现过,但是方法基本也是一样的
replaceState(object nextState[, function callback])
eg:
this.replaceState({num:0},()=>{
//取代成功后,渲染结束触发回调函数
})
setProps
在上一篇博客说到:props 相当于组件的数据流,它总是会从父组件向下传递至所有的子组件中
这里的setProps使用与state类似,但是setProps会设置新的属性并与当前属性合并
setProps(object nextProps[, function callback])
replaceProps
让设置的新属性,取代原有的属性
setProps(object nextProps[, function callback])
forceUpdate
强制更新渲染,该方法会在render()方法执行后调用
forceUpdate([function callback])
eg:
this.forceUpdata(()=>{
//强制更新操作
})
React生命周期
react生命周期,这部分可能我写的会比较垃圾,建议看看其他人写的
这里推荐:
看了对应的博客后应该就大概知道了这个东西的存在
简单说一下:
- componentWillMount 组件在被调用时触发,也就是渲染之前,可根据业务处理state,也是在render调用前处理state的唯一机会。
- componentDidMount : 在第一次渲染后调用,会被触发,一般我们请求外部数据接口放这里面,当组件被挂后只会被触发一次
- componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。
- shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。可以在你确认不需要更新组件时使用。
- componentWillUpdate 在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
- componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。
- componentWillUnmount 在组件从 DOM 中移除之前立刻被调用。
eg:
class Child extends Component {
constructor(props) {
super(props);
this.state = {
someThings: props.someThings
};
}
componentWillReceiveProps(nextProps) { // 父组件重传props时就会调用这个方法
this.setState({someThings: nextProps.someThings});
}
render() {
return <div>{this.state.someThings}</div>
}
}
学到这里基本能够开始去看antD的代码了
相关链接
上一篇:👀
下一篇:👀
Ant Design Pro 系列:👀