React从零到一Demo演练（下）

最新推荐文章于 2024-05-01 23:18:43 发布

sirwsl

最新推荐文章于 2024-05-01 23:18:43 发布

阅读量2.6k

点赞数 4

分类专栏： Ant Design Pro 文章标签： react es6 typescript reactjs

本文链接：https://blog.csdn.net/qq_40432886/article/details/117294597

版权

Ant Design Pro 专栏收录该内容

8 篇文章 41 订阅

订阅专栏

废话

这一部分比前一篇难懂些，但是还是的了解、掌握，至于用嘛，后面自己在好好研究，由于写这套教程时候我才学习一个周，所以可能有错的地方，多包涵。

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生命周期，这部分可能我写的会比较垃圾，建议看看其他人写的

这里推荐：

详解React生命周期(包括react16最新版)

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>
    }
}