20 minutes read

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

Fire bug

10/11/2022 7:45 AM

React是什么, 作用是什么

官方定义：React用于构建用户界面的 JavaScript 库

官网：https://reactjs.org/ 官网就多语言支持了

React怎么实现的

源码在这里：https://github.com/facebook/react/

源码相当庞大。上一个最简原理版本的源码, 解释一下React的工作原理。

在开发蜂巢指纹浏览器(NestBrowser)的时候, 都有去git一下react的源码翻了一下, 相当复杂, 相当庞大。

注意：

1、React15以前的版本, 虚拟DOM是用树实现的。

2、React16以后的版本, 虚拟DOM是用链表实现的。本文章的案例只适应于React16以上版本。

蜂巢指纹浏览器(NestBrowser)使用的版本号是"react": "17.0.2”。

直接上源码：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代码不能被正常解析, 所以使用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、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)

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
版本更新频繁, 经常不向前兼容

Fire bug

Leader

Nestbrowser(蜂巢浏览器) 可自定义所有参数来隐藏和控制您的数字指纹。您可以模仿真实的 Internet 身份。 Nestbrowser 帮助您创建大量配置文件, 每个配置文件都有自己的数字指纹。这些配置文件彼此不重叠, 因此网站不会禁止您的帐户。这对于执行各种任务非常有用在网上。

Member since Mar 15, 2021

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

Fire bug

React是什么, 作用是什么

React怎么实现的

React优势是什么, 劣势是什么

Fire bug

最近文章

React-dnd 实现无限子集的拖拽构建功能(多层嵌套)

复活小米蓝牙手柄, 让手柄控制电脑PC玩React写的网页游戏

Babel是什么, 作用是什么, 怎么实现的