React18内核探秘：手写React高质量源码迈向高阶开发

download: https://www.666xit.com/4202/

RN简介React Native(简称RN)是Facebook于2015年4月开源的跨渠道移动运用开发结构，是Facebook新近开源的JS结构React在原生移动运用渠道的衍生产品，现在支撑iOS和安卓两大渠道。RN运用Javascript言语，类似于HTML的JSX，以及CSS来开发移动运用，因此了解Web前端开发的技术人员只需很少的学习就能够进入移动运用开发范畴。

React Native

看起来很像

React

，只不过其根底组件是原生组件而非 web 组件。要了解

React Native

运用的根本结构，首要需求了解一些根本的

React

的概念，比如

JSX

语法、组件、

state

状况以及

props

特色。

React Native开发特色:

一次学习，随处编写:运用React Native可认为iOS和Android操作系统开发运用程序，不同渠道上的代码依据渠道会有一些微小的差异。混合开发:React Native代码开发的模块与原生代码开发的模块能够双向通信、无缝联接；高效的移动运用开发:（1）共同的UI完结结构（2）组件化开发（3）跨渠道移植代码敏捷（4）自动匹配不同屏幕巨细的手机高效的移动运用开发调试高效的运用热更新有效下降移动运用装置包体积学习门槛低、开发难度低运用React Native开发的价值为了得到React Native开发的长处，运用React Native开发的APP也需求付出必定的价值。（1）内存耗费大运用React Native开发的程序运行所需的内存比原生代码开发的程序略多。（2）运行速度运用React Native开发的代码运行速度比原生代码略慢。

React 与 React Native 除了在编码体现层都运用 JSX 语法外，在 React 与 React Native 的底层都有 Virtual DOM 与 DOM 之间的映射与转换，以完结了页面组件高效更新的前端体现。

现在最新版本是0.59React Native中文网

React Native

与

React

的关系及特色:

React

是根底结构，是一套根底规划完结理念，开发者不能直接运用它来开发移动运用或网页。在

React

之上开展出了

React.js

结构用来开发网页，开展出来

React Native

用来开发移动运用。底层原理是相同的，都是运用js完结虚拟dom树来驱动页面的烘托，react是驱动HTML dom的烘托，react native是驱动原生组件的烘托。

React.js

:目的 是为了使前端的V层更具组件化，能更好的复用，它能够运用简略的html标签创立更多的自界说组件标签，内部绑定事情，同时能够让你从操作dom中解脱出来，只需求操作数据就会改动相应的dom。

二者都是依据组件（

component

）开发，然后组件和组件之间经过

props

传递办法，每个组件都有一个状况

（state）

，当某个办法改动了这个状况值时，整个组件就会重绘，然后到达改写。另外，说到重绘就要说到

虚拟dom

了，便是用js模仿

dom

结构，等整个组件的

dom

更新结束，它会有一个

diff

的进程，对比出哪些组件发生了改动，然后才烘托到页面，简略来说只更新了比较之前改动了的部分，而不是全部改写，所以功率很高。

虚拟DOM（Virtual DOM）

的机制：在浏览器端用

Javascript

完结了一套

DOM API

。依据

React

进行开发时一切的

DOM

结构都是经过虚拟

DOM

进行，每当数据改动时，React都会从头构建整个DOM树，然后React将当时整个DOM树和上一次的DOM树进行对比，得到DOM结构的差异，然后只是将需求改动的部分进行实际的浏览器DOM更新。而且React能够批处理虚拟DOM的改写，在一个事情循环（Event Loop）内的两次数据改动会被兼并。

2.React详解

React 官网React GitHub 地址React菜鸟教程React介绍学习生态介绍

Vue生态：Vue + Vue-Router + Vuex + Axios + Babel + WebpackReact生态：React + React-Router + Redux + Axios + Babel + Webpack

2.1.React 简介

React是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。运用 React 能够将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作“组件”。

React

特色

1.声明式规划 React采用声明范式，能够轻松描绘运用。2.高效 React经过对DOM的模仿，最大极限地减少与DOM的交互。3.灵活 React能够与已知的库或结构很好地合作。4.JSX JSX是JavaScript语法的扩展。React 开发不必定运用 JSX ，但咱们主张运用它。5.组件 经过React构建组件，使得代码愈加容易得到复用，能够很好的运用在大项目的开发中。6.单向呼应的数据流 React完结了单向呼应的数据流，然后减少了重复代码，这也是它为什么比传统数据绑定更简略。2.2 React运用

1.React 环境装备装置

运用 React CDN 库经过 npm 运用 React运用 create-react-app 快速构建 React 开发环境2.3React render 烘托

屏幕输出：Hello, React

Title

ReactDOM.render(

Hello, React

,document.getElementById('root'));

3.React JSX

React 运用 JSX 来代替惯例的 JavaScript。

1.React JSX简介

JSX：JavaScript XML，一种类似于XML的JS扩展语法。也能够了解成：契合 XML 标准的 JS 语法。

JSX语法的实质：以 React.createElement 的形式来完结的，并没有直接把 用户写的 HTML代码，烘托到页面上。运用babel转换工具将 JSX语法 转换为 JS语法。

咱们不需求必定运用 JSX，但它有以下长处：

JSX 履行更快，由于它在编译为 JavaScript 代码后进行了优化。它是类型安全的，在编译进程中就能发现错误。运用 JSX 编写模板愈加简略快速。

const element =

Hello, world!

;

这种看起来或许有些奇怪的标签语法既不是字符串也不是 HTML。它被称为 JSX， 一种 JavaScript 的语法扩展。 咱们推荐在 React 中运用 JSX 来描绘用户界面。JSX 是在 JavaScript 内部完结的。

2.JSX的根本语法

（1）在 JSX内部 写 JS代码：假如要在 JSX 语法内部，书写 JS 代码，那么，一切的JS代码有必要写到 {} 的内部。在{}内部，能够写任何契合JS标准的代码。

例如：

var myTitle = '这是运用变量界说的 tilte 值'// 运用JSX语法 创立虚拟DOM目标var vDom = (

Hello, React!这是标题);

（2）当编译引擎在编译JSX代码的时分，假如遇到了<，会把它当作 HTML代码 去编译；假如遇到了 {}， 会把方括号里边的代码当作 一般JS代码 去编译。

（3）在JSX中，假如要为元素添加class特色，则有必要写成className，由于 class在ES6中是一个关键字；和class类似，label标签的 for 特色需求替换为 htmlFor。

代码举例：

// 运用JSX语法 创立虚拟DOM目标var vDom = (

Hello, React!千古壹号

);

（4）在JSX创立DOM的时分，一切的节点，有必要有唯一的根元素进行包裹。

（5）假如要写注释，注释有必要放到 {} 内部。例如：

// 运用JSX语法 创立虚拟DOM目标var vDom = (// 这一行是注释

Hello, React!

千古壹号

{/*这一行也是注释 */});

最后，再举个比如：

Document

//页面中的实在容器元素var containDiv = document.getElementById("app");var arr = []for (var i = 0; i < 6; i++) {var p = 这个是p标签

// 注意这个地方的写法： key = {i}arr.push(p)}//1、运用JSX语法 创立虚拟DOM目标var vDom = (Hello, React!{arr});//2、烘托虚拟DOM目标ReactDOM.render(vDom, containDiv); // 参数1：虚拟DOM目标；参数2：页面中的容器

4.React 组件 状况(State&props) 生命周期详解

React 把组件看成是一个状况机（State Machines）。经过与用户的交互，完结不同状况，然后烘托 UI，让用户界面和数据保持一致。

React 里，只需更新组件的 state，然后依据新的 state 从头烘托用户界面（不要操作 DOM）。

创立组件的第一种方式:在React中，结构函数便是一个最根本的组件。假如想要把组件放到页面中，能够把结构函数的名称当作组件的名称，以 HTML标签形式引进页面中即可。创立组件的第二种方式：运用 class 关键字运用 function 创立的组件，叫做【无状况组件】；运用 class 创立的组件，叫做【有状况组件】。实质差异：有状况组件和无状况组件，最实质的差异，便是有无 state 特色。同时， class 创立的组件，有自己的生命周期函数，可是，function 创立的 组件，没有自己的生命周期函数。

state 和 props 主要的差异在于 props 是不可变的，而 state 能够依据与用户交互来改动。这便是为什么有些容器组件需求界说 state 来更新和修改数据。 而子组件只能经过 props 来传递数据。

组件API

设置状况：setState替换状况：replaceState设置特色：setProps替换特色：replaceProps强制更新：forceUpdate获取DOM节点：findDOMNode判别组件挂载状况：isMounted

组件的生命周期可分成三个状况：

在组件创立、到加载到页面上运行、以及组件被毁掉的进程中，总是伴随着各式各样的事情，这些在组件特定时期，触发的事情统称为组件的生命周期。Mounting：已插入实在 DOMUpdating：正在被从头烘托Unmounting：已移出实在 DOM

生命周期的办法有：

componentWillMount 在烘托前调用,在客户端也在服务端。componentDidMount : 在第一次烘托后调用，只在客户端。之后组件现已生成了对应的DOM结构，能够经过this.getDOMNode()来进行拜访。 假如你想和其他JavaScript结构一起运用，能够在这个办法中调用setTimeout, setInterval或许发送AJAX请求等操作(防止异步操作阻塞UI)。componentWillReceiveProps 在组件接纳到一个新的 prop (更新后)时被调用。这个办法在初始化render时不会被调用。shouldComponentUpdate 回来一个布尔值。在组件接纳到新的props或许state时被调用。在初始化时或许运用forceUpdate时不被调用。能够在你确认不需求更新组件时运用。componentWillUpdate在组件接纳到新的props或许state但还没有render时被调用。在初始化时不会被调用。componentDidUpdate 在组件完结更新后立即调用。在初始化时不会被调用。componentWillUnmount在组件从 DOM 中移除之前马上被调用。1.组件创立阶段

组件创立阶段的生命周期函数，有一个明显的特色：创立阶段的生命周期函数，在组件的一辈子中，只履行一次。

getDefaultProps初始化 props 特色默认值。

getInitialState初始化组件的私有数据。由于 state 是界说在组件的 constructor 结构器当中的，只需new 了 class类，必定会调用 constructor结构器。

componentWillMount()组件将要被挂载。此刻还没有开端烘托虚拟DOM。

在这个阶段，不能去操作DOM元素，但能够操作特色、状况、function。相当于 Vue 中的Create()函数。

render()第一次开端烘托真实的虚拟DOM。当render履行完，内存中就有了完好的虚拟DOM了。

意思是，此刻，虚拟DOM在内存中创立好了，可是还没有挂在到页面上。

在这个函数内部，不能去操作DOM元素，由于还没return之前，虚拟DOM还没有创立；当return履行结束后，虚拟DOM就创立好了，可是还没有挂在到页面上。

componentDidMount()当组件（虚拟DOM）挂载到页面之后，会进入这个生命周期函数。

只需进入到这个生命周期函数，则必定阐明，页面上现已有可见的DOM元素了。此刻，组件现已显示到了页面上，state上的数据、内存中的虚拟DOM、以及浏览器中的页面，现已彻底保持一致了。

当这个办法履行完，组件就进入都了 运行中 的状况。所以说，componentDidMount 是创立阶段的最后一个函数。

在这个函数中，咱们能够放心的去 操作 页面上你需求运用的 DOM 元素了。假如咱们想操作DOM元素，最早只能在 componentDidMount 中进行。相当于 Vue 中的 mounted() 函数

2、组件运行阶段

有一个明显的特色，依据组件的state和props的改动，有选择性的触发0次或屡次。

componentWillReceiveProps()组件将要接纳新特色。只有当父组件中，经过某些事情，从头修改了 传递给 子组件的 props 数据之后，才会触发这个钩子函数。

shouldComponentUpdate()判别组件是否需求被更新。此刻，组件尚未被更新，可是，state 和 props 肯定是最新的。

componentWillUpdate()组件将要被更新。此刻，组件还没有被更新，在进入到这个生命周期函数的时分，内存中的虚拟DOM还是旧的，页面上的 DOM 元素也是旧的。（也便是说，此刻操作的是旧的 DOM元素）

render此刻，又要依据最新的 state 和 props，从头烘托一棵内存中的 虚拟DOM树。当 render 调用结束，内存中的旧DOM树，现已被新DOM树替换了！此刻，虚拟DOM树现已和组件的 state 保持一致了，都是最新的；可是页面还是旧的。

componentDidUpdate此刻，组件完结更新，页面被从头烘托。此刻，state、虚拟DOM 和 页面现已彻底保持同步。

3、组件毁掉阶段

一辈子只履行一次。

componentWillUnmount: 组件将要被卸载。此刻组件还能够正常运用。生命周期对比：

vue中的生命周期图React Native 中组件的生命周期

组件生命周期的履行次序总结

1、Mounting：

constructor()componentWillMount()render()componentDidMount()2、Updating：

componentWillReceiveProps(nextProps)：接纳父组件传递过来的特色shouldComponentUpdate(nextProps, nextState)：一旦调用 setState，就会触发这个办法。办法默认 return true；假如 return false，后续的办法就不会走了。componentWillUpdate(nextProps, nextState)render()componentDidUpdate(prevProps, prevState)3、Unmounting：

componentWillUnmount()5.React 事情处理

React 元素的事情处理和 DOM 元素类似。可是有一点语法上的不同:

React 事情绑定特色的命名采用驼峰式写法，而不是小写。假如采用 JSX 的语法你需求传入一个函数作为事情处理函数，而不是一个字符串(DOM 元素的写法)

//HTML 一般写法是：激活按钮//React 中写法为：激活按钮