React源码 Hooks
/**
* 必须要react和react-dom 16.7以上
*/
import React, { useState, useEffect } from 'react'
export default () => {
const [name, setName] = useState('zhangsan')
return (
<>
<p>My Name is: {name}</p>
<input type="text" value={name} onChange={e => setName(e.target.value)} />
</>
)
}
这是一个非常非常简单的 demo , 首先要使用 hooks ,必须要react和react-dom 16.7以上。我们这里声明了一个 function component , 在以前对比 class component , 他缺少的是什么,缺少的就是 this 对象。他没有 this 对象,就没有 this.state , 就不具有包含自己本身的状态的功能,第二个,他不能有生命周期方法,这是最明显的几个特点,在这里,我们使用了 hooks 来存储了state
const [name, setName] = useState('zhangsan')
useEffect(() => {
console.log('component update') return () => {
console.log('unbind')
}
}, [])
function resolveDispatcher() {
const dispatcher = ReactCurrentOwner.currentDispatcher;
invariant(
dispatcher !== null,
'Hooks can only be called inside the body of a function component.',
);
return dispatcher;
} export function useState<S>(initialState: (() => S) | S) {
const dispatcher = resolveDispatcher();
return dispatcher.useState(initialState);
}
我们看到 useState 里面有个 dispatcher,这个 useState 的返回值是 dispatcher.useState 。这个 dispatcher 是调用了 resolveDispatcher(). 在方法 resolveDispatcher 里面看到这个 dispatcher 是通过 ReactCurrentOwner.currentDispatcher 获取的。这就是涉及后续渲染的时候才会去赋值这些东西。因为在 react 使用阶段是没有拿到任何节点。在 createElement 的时候传入的是对象,还没真正渲染,还没真正的创建这个实例。 ReactCurrentOwner 是个全局的类,
const ReactCurrentOwner = {
/**
* @internal
* @type {ReactComponent}
*/
current: (null: null | Fiber),
currentDispatcher: (null: null | Dispatcher),
};
这就是 ReactCurrentOwner 的源码,非常简单,就是一个全局的对象。里面有两个属性,一个是 current , 就是目前渲染的是哪个节点,这个实力。currentDispatcher 就是实力对应的 dispatcher。 useEffect 类似于 useState。
React源码 Hooks的更多相关文章
- React躬行记(16)——React源码分析
React可大致分为三部分:Core.Reconciler和Renderer,在阅读源码之前,首先需要搭建测试环境,为了方便起见,本文直接采用了网友搭建好的环境,React版本是16.8.6,与最新版 ...
- React源码剖析系列 - 生命周期的管理艺术
目前,前端领域中 React 势头正盛,很少能够深入剖析内部实现机制和原理.本系列文章希望通过剖析 React 源码,理解其内部的实现原理,知其然更要知其所以然. 对于 React,其组件生命周期(C ...
- React源码解析:ReactElement
ReactElement算是React源码中比较简单的部分了,直接看源码: var ReactElement = function(type, key, ref, self, source, owne ...
- react 源码之setState
今天看了react源码,仅以记录. 1:monorepo (react 的代码管理方式) 与multirepo 相对. monorepo是单代码仓库, 是把所有相关项目都集中在一个代码仓库中,每个mo ...
- React 源码剖析系列 - 不可思议的 react diff
简单点的重复利用已有的dom和其他REACT性能快的原理. key的作用和虚拟节点 目前,前端领域中 React 势头正盛,使用者众多却少有能够深入剖析内部实现机制和原理. 本系列文章希望通过剖析 ...
- React 源码剖析系列 - 生命周期的管理艺术
目前,前端领域中 React 势头正盛,很少能够深入剖析内部实现机制和原理. 本系列文章 希望通过剖析 React 源码,理解其内部的实现原理,知其然更要知其所以然. 对于 React,其组件生命周期 ...
- 读react源码准备
git源码地址:https://github.com/facebook/react react 里面就是 react源码 react里面的react文件夹就是react源码,react源码非常的少,总 ...
- react源码之render
1.最近学习react源码,刚刚入门,看了render的原理,到了fiberRoot的创建 如图:
- React源码之组件的实现与首次渲染
react: v15.0.0 本文讲 组件如何编译 以及 ReactDOM.render 的渲染过程. babel 的编译 babel 将 React JSX 编译成 JavaScript. 在 ba ...
随机推荐
- MySQL统计百分比结果
1,不带小数点的百分比 SELECT CONCAT(ROUND(errorTable.errorCount / totalTable.totalCount * 100),'','%') FROM (S ...
- MVC发布出现:未能将文件bin\xxx.xml 复制到 obj\Release\PackageTmp\bin\xxx.xml,未能找到文件
之前写的项目好好的,也可以发布,然后今天要发布MVC项目,一直报错,报下面这个错误 莫名其妙搞了好久,没搜到合理的解决方案,结果就只能瞎搞了. 突然想起了,我前几天犯贱把项目根目录下的bin文件夹和o ...
- IntelliJ IDEA编辑器的使用技巧
目录 1. 使用技巧 1. 跳转小工具 2. 无处不在的跳转 3. 精准搜索 4. 列操作: 5. live template 6. postfix 7. ALT+ENTER智能提示,代码优化 8. ...
- 解析XML数据
在 Java 程序中读取 XML 文件的过程称为解析 XML 解析 XML 文件的方式 1) DOM 解析 (java 官方提供) 2) SAX 解析(java 官方提供) 3) JDOM 解析(第三 ...
- 招聘.net高级工程师
1. 本科及以上学历(必须): 2. 精通.net框架和常见web框架,精通常见设计模式并熟练应用. 3. 扎实的技术功底,有良好的数据结构和算法基础,深入理解面向对象编程思想, 熟悉面向对象的基本设 ...
- python文件打包发布(引用的包也可以加进来),打包出错解决了,运行出错解决了
一开始,我以为,打包本来就很容易,可是没有..... 没想到打包还能遇到坑 T.T 打包步骤: 1.安装 pyinstaller (cmd) pip install pyinstaller 2.进入目 ...
- TestNG系列(一)TestNG+Eclipse环境配置
前提 1.JDK的安装与环境变量的配置 2.Eclipse的下载与安装 以上这些是基础中的基础,不再详细介绍. Eclipse安装TestNG插件 打开eclipse--->help---> ...
- Vue,Javascript--时间戳的操作
new Date(parseInt(data.substring(6, data.length - 2))).toLocaleDateString(); 我这里的data记得替换成你的数据,在过滤器中 ...
- docker学习之路-centos下安装docker
前言 我要在云服务器上做一个asp.net core的webapi应用,使用docker来部署应用,中间用到的任何组件包括nginx和sqlserver 2017都是用docker来装载运行,所以,这 ...
- Python面向对象继承案例
面向对象三大特性 封装 根据 职责 将 属性 和 方法 封装 到一个抽象的 类 中 继承 实现代码的重用,相同的代码不需要重复的编写 多态 不同的对象调用相同的方法,产生不同的执行结果,增加代码的灵活 ...