注意:

1. 自定义组件首字母必须大写。这里是以函数表达式的方式定义子组件的。

2. 使用 ES6 的 class 关键字创建的 React 组件,组件中的方法遵循与常规 ES6 class 相同的语法规则。这意味着这些方法不会自动绑定 this 到这个组件实例。 你需要显式地调用 .bind(this)

一、setState(updater, [callback])

1. updater的实质是一个函数

setState((state, props) => ({quantity: state.quantity + 2}) )   // 返回的是状态改变对象,并与之前的state合并

但更多的时候,我们使用其简写形式,传入的是一个对象

setState({quantity: 2})

如果新的状态不依赖原始state, 使用简写(对象)方式;如果新的状态依赖原始State, 使用函数方式写。

2. setState() 并不总是立即更新组件。它会批量推迟更新。这使得在调用 setState() 后立即读取 this.state 成为了隐患。

为了能正确获取更新后的state数据,在componentDidUpdate 或者在setState 的回调函数callback中去获取state值,保证获取的state是更新后的值。

this.setState((state) => ({
quantity: state.quantity + 1
}), () => {
console.log('after state update', state.quantity);
}
)

3. setState()是同步的,还是异步的?

react相关的回调(声明周期、react事件监听回调):异步

其他异步回调(setTimeout, Promise.then事件回调 / await之后, DOM事件监听):同步

4. 多次调用异步的setState, 无论调用多少次setState,只执行一次render.

// 初始
this.state = {
count: 1
}

4.1 使用对象的方式(状态更新合并成一次)

update1 = () =》 {
this.setState({count : this.state.count +1});
this.setState({count : this.state.count +1});
}
// render中得到的state.count = 2

4.2 使用函数的形式(状态更新是多次进行的【updater 函数中接收的 state 和 props 都保证为最新】,render合并为一次)

update2 = () => {
this.setState((state) => ({
count: state.count + 1
})
this.setState((state) => ({
count: state.count + 1
})
}
// render中的结果为3(加法执行了两次)

4.3 混用对象形式和函数形式

update3 = () => {
// 先执行对象形式,后执行函数形式
this.setState({count : this.state.count +1});
this.setState((state) => ({
count : state.count +1
}));
} // render中的state.count = 3 update4 = () => {
//先执行函数形式, 再执行对象形式
this.setState((state) => ({
count : state.count +1
}));
this.setState({count : this.state.count +1});
}
// render中的state.count = 2

拓展:面试题

class Test extends React.Component {
state = {
count: 0
};
// handleClick = () => {};
componentDidMount() {
// 异步
this.setState({
count: this.state.count + 1
});
this.setState({
count: this.state.count + 1 //
});
console.log(this.state.count); // 2==>0
// 异步
this.setState(state => ({ count: state.count + 1 })); //
this.setState(state => ({ count: state.count + 1 })); //
console.log(this.state.count); // 3==>0 setTimeout(() => {
this.setState({ count: this.state.count + 1 }); //
console.log("timeout", this.state.count); // 10==>6 this.setState({ count: this.state.count + 1 }); //
console.log("timeout", this.state.count); // 12==>7
}); Promise.resolve().then(value => {
this.setState({ count: this.state.count + 1 }); //
console.log("promise", this.state.count); // 6==>4 this.setState({ count: this.state.count + 1 }); //
console.log("promise", this.state.count); // 8==>5
});
}
render() {
const { count } = this.state;
console.log("render", count); // 1==>0 4==>3 5==>4 7==>5 9==>6 11=>7
return (
<div>
<p>{count}</p>
{/* <button onClick={() => this.handleClick}>更新</button> */}
</div>
);
}
}

注意:多个setState执行后,他们的组合结果一次性地传递给render进行重新渲染。

React组件setState的更多相关文章

  1. 在React组件unmounted之后setState的报错处理

    最近在做项目的时候遇到一个问题,在 react 组件 unmounted 之后 setState 会报错.我们先来看个例子, 重现一下问题: class Welcome extends Compone ...

  2. React组件属性部类(propTypes)校验

    React组件属性类型(propTypes)校验 Prop 验证 随着应用不断变大,保证组件被正确使用变得非常有用.为此我们引入propTypes.React.PropTypes 提供很多验证器 (v ...

  3. 野心勃勃的React组件生命周期

    当你还在写着Angular指令,过滤器,注入,服务,提供者,视图模版的时候,是不是觉得很烦,好在这个时候,React已经神一样的出现在历史舞台. React组件    React实现了UI=Fn(St ...

  4. React组件生命周期过程说明

    来自kiinlam github94 实例化 首次实例化 getDefaultProps getInitialState componentWillMount render componentDidM ...

  5. React组件系统、props与状态(state)

     多个组件合成一个组件: var style = { fontSize: 20, color: '#ff0000' }; var WebSite = React.createClass({ rende ...

  6. React组件开发

    目录: 属性:props 内联样式 状态记忆 : state 生命周期 访问DOM 表单输入 承接快速入门篇:http://www.cnblogs.com/jasonnode/p/4444504.ht ...

  7. React组件生命周期过程说明【转】

    实例化 首次实例化 getDefaultProps getInitialState componentWillMount render componentDidMount 实例化完成后的更新 getI ...

  8. react组件什么周期记录,转的

    react 的核心除了虚拟DOM,我想还有一个很重要的就是生命周期函数,理解生命周期函数,对写出合理的commponet很有帮助.下面总结一下我对生命周期函数的一些理解已经在项目过程中遇到的一些问题. ...

  9. React组件开发入门

    React 组件开发入门 Introduction 本文组成: Ryan Clark文章Getting started with React的翻译. 博主的实践心得. React由Facebook的程 ...

随机推荐

  1. 面试官:你对Redis缓存了解吗?面对这11道面试题你是否有很多问号?

    前言 关于Redis的知识,总结了一个脑图分享给大家 1.在项目中缓存是如何使用的?为什么要用缓存?缓存使用不当会造成什么后果? 面试官心理分析 这个问题,互联网公司必问,要是一个人连缓存都不太清楚, ...

  2. thinkphp5 不使用form,用input+ajax异步上传图片

    不支持$this->request->file()获取图片 后台接收文件请使用$_FILE 正文开始: HTML <div class="upload"> ...

  3. 2019-2020-1 20199329《Linux内核原理与分析》第二周作业

    <Linux内核原理与分析>第二周作业 一.上周问题总结: 未能及时整理笔记 Linux还需要多用 markdown格式不熟练 发布博客时间超过规定期限 二.本周学习内容: <庖丁解 ...

  4. Libra教程之:Libra testnet使用指南

    文章目录 Libra testnet网络 下载和安装Libra 编译Libra client并连接到Testnet网络 创建两个A和B的两个账号 检查libra cli Client是否运行 创建A的 ...

  5. Ubuntu 之 win10更新ubuntu启动项消失

    问题描述: 昨晚windows更新,今天启动的时候发现启动项没有了,直接进入windows. 解决方案一: 首先进入BIOS看一看是否开启启动项选择,然后再把安全模式(secure boot)关闭(重 ...

  6. 【Linux常见命令】tr命令

    tr - translate or delete characters tr 命令用于转换或删除文件中的字符. tr 指令从标准输入设备读取数据,经过字符串转译后,将结果输出到标准输出设备. 语法: ...

  7. 数据结构--链式栈--C++实现

    #include <iostream> using namespace std; template<class T>class Stack { private: struct ...

  8. RDP凭据离线脱取

    内网渗透-获取本地RDP密码 获取RDP 连接记录: reg query "HKEY_CURRENT_USER\Software\Microsoft\Terminal Server Clie ...

  9. react-redux的理解

    react-redux是辅助redux的,我们正常使用redux是很麻烦的,需要在每个组件中去监听数据变化,执行数据更新等 但是通过react-redux,我们可以简化组件使用公共数据的操作, rea ...

  10. 保姆式教学:Typora+图床功能

    众所周知,markdown编辑器typora是一款很好的可视化.所见即所得型的编辑器! 但是,因为图片问题,本菜狗常常不能把某些写好的markdown文档直接复制粘贴进博客而不加修改-- 不过,前几天 ...