从 0 到 1 实现 React 系列 —— 4.setState优化和ref的实现
看源码一个痛处是会陷进理不顺主干的困局中,本系列文章在实现一个 (x)react 的同时理顺 React 框架的主干内容(JSX/虚拟DOM/组件/生命周期/diff算法/setState/ref/...)
- 从 0 到 1 实现 React 系列 —— JSX 和 Virtual DOM
- 从 0 到 1 实现 React 系列 —— 组件和 state|props
- 从 0 到 1 实现 React 系列 —— 生命周期和 diff 算法
- 从 0 到 1 实现 React 系列 —— 优化 setState 和 ref 的实现
同步 setState 的问题
而在现有 setState 逻辑实现中,每调用一次 setState 就会执行 render 一次。因此在如下代码中,每次点击增加按钮,因为 click 方法里调用了 10 次 setState 函数,页面也会被渲染 10 次。而我们希望的是每点击一次增加按钮只执行 render 函数一次。
export default class B extends Component {
constructor(props) {
super(props)
this.state = {
count: 0
}
this.click = this.click.bind(this)
}
click() {
for (let i = 0; i < 10; i++) {
this.setState({ // 在先前的逻辑中,没调用一次 setState 就会 render 一次
count: ++this.state.count
})
}
}
render() {
console.log(this.state.count)
return (
<div>
<button onClick={this.click}>增加</button>
<div>{this.state.count}</div>
</div>
)
}
}
异步调用 setState
查阅 setState 的 api,其形式如下:
setState(updater, [callback])
它能接收两个参数,其中第一个参数 updater 可以为对象或者为函数 ((prevState, props) => stateChange
),第二个参数为回调函数;
确定优化思路为:将多次 setState 后跟着的值进行浅合并,并借助事件循环等所有值合并好之后再进行渲染界面。
let componentArr = []
// 异步渲染
function asyncRender(updater, component, cb) {
if (componentArr.length === 0) {
defer(() => render()) // 利用事件循环,延迟渲染函数的调用
}
if (cb) defer(cb) // 调用回调函数
if (_.isFunction(updater)) { // 处理 setState 后跟函数的情况
updater = updater(component.state, component.props)
}
// 浅合并逻辑
component.state = Object.assign({}, component.state, updater)
if (componentArr.includes(component)) {
component.state = Object.assign({}, component.state, updater)
} else {
componentArr.push(component)
}
}
function render() {
let component
while (component = componentArr.shift()) {
renderComponent(component) // rerender
}
}
// 事件循环,关于 promise 的事件循环和 setTimeout 的事件循环后续会单独写篇文章。
const defer = function(fn) {
return Promise.resolve().then(() => fn())
}
此时,每点击一次增加按钮 render 函数只执行一次了。
ref 的实现
在 react 中并不建议使用 ref 属性,而应该尽量使用状态提升,但是 react 还是提供了 ref 属性赋予了开发者操作 dom 的能力,react 的 ref 有 string
、callback
、createRef
三种形式,分别如下:
// string 这种写法未来会被抛弃
class MyComponent extends Component {
componentDidMount() {
this.refs.myRef.focus()
}
render() {
return <input ref="myRef" />
}
}
// callback(比较通用)
class MyComponent extends Component {
componentDidMount() {
this.myRef.focus()
}
render() {
return <input ref={(ele) => {
this.myRef = ele
}} />
}
}
// react 16.3 增加,其它 react-like 框架还没有同步
class MyComponent extends Component {
constructor() {
super() {
this.myRef = React.createRef()
}
}
componentDidMount() {
this.myRef.current.focus()
}
render() {
return <input ref={this.myRef} />
}
}
React ref 的前世今生 罗列了三种写法的差异,下面对上述例子中的第二种写法(比较通用)进行实现。
首先在 setAttribute 方法内补充上对 ref 的属性进行特殊处理,
function setAttribute(dom, attr, value) {
...
else if (attr === 'ref') { // 处理 ref 属性
if (_.isFunction(value)) {
value(dom)
}
}
...
}
针对这个例子中 this.myRef.focus()
的 focus 属性需要异步处理,因为调用 componentDidMount 的时候,界面上还未添加 dom 元素。处理 renderComponent 函数:
function renderComponent(component) {
...
else if (component && component.componentDidMount) {
defer(component.componentDidMount.bind(component))
}
...
}
刷新页面,可以发现 input 框已为选中状态。
处理完普通元素的 ref 后,再来处理下自定义组件的 ref 的情况。之前默认自定义组件上是没属性的,现在只要针对自定义组件的 ref 属性做相应处理即可。稍微修改 vdomToDom 函数如下:
function vdomToDom(vdom) {
if (_.isFunction(vdom.nodeName)) { // 此时是自定义组件
...
for (const attr in vdom.attributes) { // 处理自定义组件的 ref 属性
if (attr === 'ref' && _.isFunction(vdom.attributes[attr])) {
vdom.attributes[attr](component)
}
}
...
}
...
}
跑如下测试用例:
class A extends Component {
constructor() {
super()
this.state = {
count: 0
}
this.click = this.click.bind(this)
}
click() {
this.setState({
count: ++this.state.count
})
}
render() {
return <div>{this.state.count}</div>
}
}
class B extends Component {
constructor() {
super()
this.click = this.click.bind(this)
}
click() {
this.A.click()
}
render() {
return (
<div>
<button onClick={this.click}>加1</button>
<A ref={(e) => { this.A = e }} />
</div>
)
}
}
效果如下:
本系列文章拜读和借鉴了 simple-react,在此特别感谢 Jiulong Hu 的分享。
从 0 到 1 实现 React 系列 —— 4.setState优化和ref的实现的更多相关文章
- 从 0 到 1 实现 React 系列 —— 1.JSX 和 Virtual DOM
看源码一个痛处是会陷进理不顺主干的困局中,本系列文章在实现一个 (x)react 的同时理顺 React 框架的主干内容(JSX/虚拟DOM/组件/生命周期/diff算法/setState/ref/. ...
- 从 0 到 1 实现 React 系列 —— 5.PureComponent 实现 && HOC 探幽
本系列文章在实现一个 cpreact 的同时帮助大家理顺 React 框架的核心内容(JSX/虚拟DOM/组件/生命周期/diff算法/setState/PureComponent/HOC/...) ...
- 从 0 到 1 实现 React 系列 —— 3.生命周期和 diff 算法
看源码一个痛处是会陷进理不顺主干的困局中,本系列文章在实现一个 (x)react 的同时理顺 React 框架的主干内容(JSX/虚拟DOM/组件/生命周期/diff算法/setState/ref/. ...
- 从 0 到 1 实现 React 系列 —— 2.组件和 state|props
看源码一个痛处是会陷进理不顺主干的困局中,本系列文章在实现一个 (x)react 的同时理顺 React 框架的主干内容(JSX/虚拟DOM/组件/生命周期/diff算法/setState/ref/. ...
- 从0到1用react+antd+redux搭建一个开箱即用的企业级管理后台系列(基础篇)
背景 最近因为要做一个新的管理后台项目,新公司大部分是用vue写的,技术栈这块也是想切到react上面来,所以,这次从0到1重新搭建一个react项目架子,需要考虑的东西的很多,包括目录结构.代码 ...
- React 系列教程 1:实现 Animate.css 官网效果
前言 这是 React 系列教程的第一篇,我们将用 React 实现 Animate.css 官网的效果.对于 Animate.css 官网效果是一个非常简单的例子,原代码使用 jQuery 编写,就 ...
- react系列笔记1 用npx npm命令创建react app
react系列笔记1 用npx npm命令创建react app create-react-app my-app是开始构建新的 React 单页应用程序的最佳方式.它已经为你设置好了开发环境,以便您可 ...
- 用SignalR 2.0开发客服系统[系列2:实现聊天室]
前言 交流群:195866844 上周发表了 用SignalR 2.0开发客服系统[系列1:实现群发通讯] 这篇文章,得到了很多帮助和鼓励,小弟在此真心的感谢大家的支持.. 这周继续系列2,实现聊天室 ...
- 用SignalR 2.0开发客服系统[系列3:实现点对点通讯]
前言 交流群:195866844 目录: 用SignalR 2.0开发客服系统[系列1:实现群发通讯] 用SignalR 2.0开发客服系统[系列2:实现聊天室] 真的很感谢大家的支持,今天发表系列3 ...
随机推荐
- python第一百零九天---Django 4
session :1. Session 基于Cookie做用户验证时:敏感信息不适合放在cookie中 a. Session原理 Cookie是保存在用户浏览器端的键值对 Session是保存在服务器 ...
- ASP.NET MVC从视图传参到控制器的几种形式
1. 传递数组 $(function () { var value = ["C#", "JAVA", "PHP"]; $("inp ...
- 老K漫谈区块链的共识(3)——分布式系统和区块链共识
1. 啥是分布式系统 当我们评价一个新的事物或者介绍一个新的技术的时候,我们不能架空历史和环境,新的事物不可能脱离历史和环境凭空诞生.任何新的事物和新的技术总是或多或少的,与旧的事件以及过去的技术有所 ...
- SMM框架--maven创建web项目
1.首先新建一个maven项目,看图: 2.按照以上步骤就可以创建一个maven项目,可以看到最下图的目录结构,但是这样的目录结构是不对的,需要做一些修改. 首先为了避免乱码,我们应该将项目编码换成U ...
- c/c++ 标准容器 之 初始化, 赋值, swap, 比较
c/c++ 标准容器 之 初始化, 赋值, swap, 比较 知识点 1,容器的初始化,对应代码里的test1 2,标准库array的初始化,对应代码里的test2 3,容器的赋值 ,对应代码里的te ...
- ADV190007 - “PrivExchange” 特权提升漏洞的指南
Microsoft Exchange Server中存在一个特权提升漏洞.成功利用此漏洞的攻击者可能会尝试模仿Exchange服务器的任何其他用户.要利用此漏洞,攻击者需要执行中间人攻击才能将身份验证 ...
- php学习----文件系统
PHP文件系统之读取文件内容 PHP具有丰富的文件操作函数,最简单的读取文件的函数为file_get_contents,可以将整个文件全部读取到一个字符串中. $content = file_get_ ...
- 注入攻击(SQL注入防御)
正确的防御SQL注入 sql注入的防御不是简单只做一些用户输入的escape处理,这样是不够的,只是提高了攻击者的门槛而已,还是不够安全. 例如 mysql_real_escape_string()函 ...
- springboot中配置了拦截器后,拦截器无效的解决方案之一
springboot的启动类xxxApplication不能扫描到拦截器配置类,可加上@ComponentScan(basePackages={"com.maya.common"} ...
- 经常在比特币中看到的merkle树是什么?
区块基础-merkle树 Merkle tree中文叫做梅克尔树,这当然不是一棵真正的植物树,merkle tree是计算机数据结构中的一种树,是由计算机科学家 Ralph Merkle 提出的, ...