React 从零到一 Demo 演练(下)

废话

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

React API

React 的 Api 有很多,这里为了后面 AntD 的上手,就简单介绍 6 个,够用就行,分别是:

我们一一来看一下:

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 组件生命周期详解

看了对应的博客后应该就大概知道了这个东西的存在

简单说一下:

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 的代码了

相关链接

上一篇:👀

React 从零到一 Demo 演练(上)

下一篇:👀

Ant Design Pro 从零到一(认识 AntD)

Ant Design Pro 系列:👀

Ant Design Pro 从零到一教程

React 从零到一 Demo 演练(上)

React 从零到一 Demo 演练(下)

Ant Design Pro 从零到一(认识 AntD)

Ant Design Pro 从零到一(页面创建)

Ant Design Pro 从零到一(Mock 使用)

Ant Design Pro 从零到一(学习 Model)

Ant Design Pro 从零到一 (总结)

  • React

    React 是 Facebook 开源的一个用于构建 UI 的 JavaScript 库。

    171 引用 • 267 回帖 • 552 关注
  • Ant-Design

    Ant Design 是服务于企业级产品的设计体系,基于确定和自然的设计价值观上的模块化解决方案,让设计者和开发者专注于更好的用户体验。

    17 引用 • 23 回帖 • 6 关注

广告 我要投放

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...