React是什么,作用是什么
官方定义:React用于构建用户界面的 JavaScript 库
官网:React – A JavaScript library for building user interfaces 官网就多语言支持了
React怎么实现的
源码在这里:https://github.com/facebook/react/
源码相当庞大。上一个最简原理版本的源码,解释一下React的工作原理。
在开发蜂巢指纹浏览器(NestBrowser)的时候,都有去git一下react的源码翻了一下,相当复杂,相当庞大。
注意:
1、React15以前的版本,虚拟DOM是用树实现的。
2、React16以后的版本,虚拟DOM是用链表实现的。本文章的案例只适应于React16以上版本。
蜂巢指纹浏览器(NestBrowser)使用的版本号是"react": "17.0.2”。
React最简实现,直接上源码:https://github.com/pomber/didact
怎么把这份源码在浏览器上跑出来React的效果呢?
1、把didact.js下载回来,放在一个特定目录
2、在同目录下建立一个index.html,输入如下最简html代码:
<html>
<head></head>
<body>
<div id="root"></div>
<script src="./didact.js"></script>
</body>
</html>
3、把index.html拉入浏览器,发现白屏,打开devtools发现输出错误:
4、是jsx代码不能被正常解析,浏览器是不能解析运行jsx代码的,所以需要手动使用babel把didact.js中的jsx代码段编译为正常的javascript:
5、修改后代码如下:
/** @jsx Didact.createElement */
/*
function Counter() {
const [state, setState] = Didact.useState(1)
return (
<h1 onClick={() => setState(c => c + 1)}>
Count: {state}
</h1>
)
}
const element = <Counter />
*/
function Counter() {
const [state, setState] = Didact.useState(1);
return /*#__PURE__*/Didact.createElement("h1", {
onClick: () => setState(c => c + 1)
}, "Count: ", state);
}
const element = /*#__PURE__*/Didact.createElement(Counter, null);
const container = document.getElementById("root")
Didact.render(element, container)
6、保存再刷新index.html并调试javascript,一个最简实现React就跑起来了。每点击一次加1。
主要代码解析:
1、render函数:
function render(element, container) {
wipRoot = {
dom: container,
props: {
children: [element],
},
alternate: currentRoot,
}
deletions = []
nextUnitOfWork = wipRoot
}
//构建一个需要render的fiber节点
2、react工作主循环
function workLoop(deadline) {
let shouldYield = false
while (nextUnitOfWork && !shouldYield) {
nextUnitOfWork = performUnitOfWork(
nextUnitOfWork
)
shouldYield = deadline.timeRemaining() < 1
}
if (!nextUnitOfWork && wipRoot) {
commitRoot()
}
requestIdleCallback(workLoop)
}
requestIdleCallback(workLoop)
//这是一个无限循环在判断处理fiber链表
3、hook实现
function useState(initial) {
const oldHook =
wipFiber.alternate &&
wipFiber.alternate.hooks &&
wipFiber.alternate.hooks[hookIndex]
const hook = {
state: oldHook ? oldHook.state : initial,
queue: [],
}
const actions = oldHook ? oldHook.queue : []
actions.forEach(action => {
hook.state = action(hook.state)
})
const setState = action => {
hook.queue.push(action)
wipRoot = {
dom: currentRoot.dom,
props: currentRoot.props,
alternate: currentRoot,
}
nextUnitOfWork = wipRoot
deletions = []
}
wipFiber.hooks.push(hook)
hookIndex++
return [hook.state, setState]
}
React优势是什么,劣势是什么
蜂巢指纹浏览器(NestBrowser)开发中体会到优劣势都很明显,更多的是思维的转变。对新人来说,React更好接受,对拥有JQuery编程经验的前端来说,真是束手束脚。
React优势
1.简洁:
在当业务流程复杂的时候,我们就会发现单向数据流和组件化的组合方式会很大程度上降低问题的复杂度
2.灵活:
在 React 里,我们可以把一切理解为 JS,这样操作起来就少了很多束缚;另外组件提供的多种嵌套方式,数据驱动、生命周期等让开发变得更加顺畅
3.高效
这离不开我们刚才的虚拟 DOM,它通过减少和优化 对DOM 的操作,能在 React 在浏览器里有更好的性能表现
React劣势
-
React 只是 视图层的一个框架,如果需要做其他事情,需要依赖它的生态系统;如处理单页面路由使用 Router,处理数据使用 Redux
-
版本更新频繁,经常不向前兼容