React是什么，作用是什么，怎么实现的，优势是什么，劣势是什么

最新推荐文章于 2023-07-21 08:47:04 发布

NestBrowser

最新推荐文章于 2023-07-21 08:47:04 发布

阅读量423

点赞数

分类专栏：大白话系列文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/weixin_48634509/article/details/128816733

版权

大白话系列专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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]
}