react源码过程（1）- 准备工作

Posted on | In

准备工作

首先先到github下载最新的源码包

1
$ yarn install

在安装模块的时候遇到报错

WX20191009-221629@2x

1
$ yarn cache clean

之后再安装

启动

1
$ npm run build

起个服务打开/fixtures/packaging/，选择个调试的。建议选择fixtures/packaging/babel-standalone/dev.html比较好用

了解

  • requestAnimationFrame
  • requestIdleCallback
  • window.postMessage
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
  </head>

  <body>
    <div onclick="send()">clickMe</div>
    <script>
      window.addEventListener('message', idleTick, false)

      function idleTick(e) {
        console.log(e)
      }

      function send() {
        window.requestAnimationFrame(() => {
          console.log('requestAnimationFrame')
        })
        setTimeout(() => {
          console.log('timeout')
        })
        window.postMessage(123, '*')
        Promise.resolve('resolve').then(data => {
          console.log(data)
        })
      }
      //点击事件输出结果
      //resolve
      //requestAnimationFrame
      //123
      //timeout
    </script>
  </body>
</html>

参考资料

https://react.jokcy.me/

scheduler-fiber-scheduler