废话
这一部分比前一篇难懂些，但是还是的了解、掌握，至于用嘛，后面自己在好好研究，由于写这套教程时候我才学习一个周，所以可能有错的地方，多包涵。
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 系列：👀
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于