## 1.1、虚拟DOM
常见问题:react virtual dom是什么?说一下diff算法?
拿到一个问题,一般回答都是是什么?为什么?怎么办?那就按照这个思路来吧!
what
用 JavaScript 对象表示 DOM 信息和结构,当状态变更的时候,重新渲染这个 JavaScript 的对象结构。这个 JavaScript 对象称为virtual dom;
why
DOM操作很慢,轻微的操作都可能导致页面重新排版,非常耗性能。相对于DOM对象,js对象处理起来更快,而且更简单。通过diff算法对比新旧vdom之间的差异,可以批量的、最小化的执行dom操作,从而提高性能。
where
React中用JSX语法描述视图,通过babel-loader转译后它们变为React.createElement(…)形式,该函数将生成vdom来描述真实dom。将来如果状态变化,vdom将作出相应变化,再通过diff算法对比新老vdom区别从而做出最终dom操作。
这里说到了JSX,那就顺带大致说一下:
什么是JSX
语法糖, React 使用 JSX 来替代常规的 JavaScript。
JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。
React实战视频讲解:进入学习
为什么需要JSX
开发效率:使用 JSX 编写模板简单快速。
执行效率:JSX编译为 JavaScript 代码后进行了优化,执行更快。
类型安全:在编译过程中就能发现错误。
React 16原理
babel-loader会预编译JSX为React.createElement(...)
React 17原理
React 17中的 JSX 转换不会将 JSX 转换为 React.createElement,而是自动从 React 的 package 中引入新的入口函数并调用。另外此次升级不会改变 JSX 语法,旧的 JSX 转换也将继续工作。
与vue的异同
react中虚拟dom+jsx的设计一开始就有,vue则是演进过程中才出现的,2.0版本后出现。
jsx本来就是js扩展,转义过程简单直接的多;vue把template编译为render函数的过程需要复杂的编译器转换字符串-ast-js函数字符串
1.2、render、Component基础核心api
render
ReactDOM.render(element, container[, callback]);
当首次调用的时候,容器节点里的所有DOM 元素都会被替换,后续的调用则会使用React的DOM的差分算法(DOM diffing algorithm)进行高效的更新。
如果提供了可选的回调函数,该回调将在组件被渲染或更新之后被执行。
节点类型
1、文本节点
2、html 标签节点
3、函数组件
4、类组件
...
函数组件
// 大些字母开头
function Welcome(props) {
return <h1>Hello, {
props.name}</h1>
}
类组件
React 的组件可以定义为class 或函数的形式,如需定义class 组件,需要继承React.Component 或 React.PureComponent:
class Welcome extends React.Component {
render() {
return <h1>Hello, {
this.props.name}</h1>
}
}
1.3、手写简版myreact
实现原生标签节点、文本节点、函数组件和类组件的初次渲染
先用 Create React App 创建一个 React 项目,安装依赖并运行;
接着在 src/index.js 里边加上 这段代码查看一下版本号,保证自己的是17版本
console.log("version", React.version);
正是因为 React17 中,React会自动替换JSX为js对象,所以我们主要需要注释掉 src/index.js 中:
// import React from "react";
// import ReactDOM from "react-dom";
接着在src 下创建一个myreact文件夹,在里边创建一个 react-dome.js
// vnode 虚拟dom对象
// node 真实dom节点
// ! 初次渲染