React打基础

[cytle]

React打基础

[cytle]

深入理解React笔记

来源 lanjingling0510/blog#1 (comment)

渲染过程

[cytle]

阅读源码

版本： 16.0.0-rc.2

0. 增加包知识

• assert，The assert module provides a simple set of assertion tests that can be used to test invariants.
• flow 静态类型检测器
• child_process child_process.spawn

其它问题

• Graph::Easy
• 全局事件代理的优缺点
• TypeScript
• 源码结构
• 同构含义
• 正则贪婪模式
• 数组 push 和 预先指定长度

    var childArray = Array(childrenLength);
    for (var i = 0; i < childrenLength; i++) {
      childArray[i] = arguments[i + 2];
    }

    // 与
    var childArray = [];

    for (var i = 0; i < childrenLength; i++) {
      childArray.push(arguments[i + 2]);
    }

    // 与
    var childArray = Array.prototype.slice.call(arguments, 2);

1. scripts

"scripts": {
    "build": "npm run version-check && node scripts/rollup/build.js",
    "linc": "git diff --name-only --diff-filter=ACMRTUB `git merge-base HEAD master` | grep '\\.js$' | xargs eslint --",
    "lint": "node ./scripts/tasks/eslint.js",
    "postinstall": "node node_modules/fbjs-scripts/node/check-dev-engines.js package.json",
    "test": "jest",
    "flow": "node ./scripts/tasks/flow.js",
    "prettier": "node ./scripts/prettier/index.js write-changed",
    "prettier-all": "node ./scripts/prettier/index.js write",
    "version-check": "node ./scripts/tasks/version-check.js"
  },

build

打包

TODO 打包脚本阅读

linc*

只lint部分与master有修改的文件

lint

风格检查

TODO 脚本阅读

postinstall

安装React后运行

test

单元测试

flow

代码检查
https://flow.org/en/docs/getting-started/

prettier

格式化代码

prettier-all

全量格式化代码

version-check

(在安装后，)检查版本

check-dev-engines.js检查当前环境

1. 检查当前运行时node版本是否支持，支持的node版本在package.devEngines.node中配置
2. 检查当前运行时npm版本是否支持，支持的npm版本在package.devEngines.npm中配置

[cytle]

入口

// ReactEntry.js，导出结构
var React = {
  Children: { // 针对children的辅助方法
    map: ReactChildren.map, 
    forEach: ReactChildren.forEach,
    count: ReactChildren.count,
    toArray: ReactChildren.toArray,
    only: onlyChild,
  },

  Component: ReactBaseClasses.Component, // 一般组件
  PureComponent: ReactBaseClasses.PureComponent, // 纯组件
  unstable_AsyncComponent: ReactBaseClasses.Async Component, // 异步组件

  createElement: createElement, // 如果是开发环境引入则为ReactElementValidator.createElement
  cloneElement: cloneElement, // clone元素
  isValidElement: ReactElement.isValidElement,

  createFactory: createFactory,

  version: ReactVersion,

  __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: {
    ReactCurrentOwner: require('ReactCurrentOwner'),
  },
};

if (__DEV__) {
  Object.assign(React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, {
    // These should not be included in production.
    ReactComponentTreeHook: require('ReactComponentTreeHook'),
    ReactDebugCurrentFrame: require('ReactDebugCurrentFrame'),
  });
}

ReactCompositeComponent

类型

• ImpureClass 非纯类组件 Component
• PureClass 纯类组件 PureComponent
• StatelessFunctional 无状态函数组件
• unstable_AsyncComponent AsyncComponent

class ReactComponent {
  constructor() {}
  setState() {}
  forceUpdate() {}
  isReactComponent = {}
}

class PureComponent extends ReactComponent {
  constructor() {}
  setState() {}
  forceUpdate() {}
  isReactComponent = {}
  isPureReactComponent = true
}

class ReactAsyncComponent extends ReactComponent {
  constructor() {}
  setState() {}
  forceUpdate() {}
  isReactComponent = {}
  unstable_isAsyncReactComponent = true
  render() {
    return this.props.children;
  };
}

[cytle]

源码目录

入口

• React: src/isomorphic/ReactEntry.js
  • React.Component: src/just_try/react/src/isomorphic/modern/class/ReactBaseClasses.js
  • React.Children: src/isomorphic/children/ReactChildren.js
  • React.createElement: src/isomorphic/classic/element/ReactElement.js
• ReactDom: src/renderers/dom/ReactDOMStackEntry.js web
  • ReactDom.render: src/renderers/dom/stack/client/ReactMount.js

[cytle]

需要回答清楚的原理问题

1. 调用 setState 之后发生了什么

this.setState(partialState, callback) ->
ReactNoopUpdateQueue.enqueueSetState(this, partialState, callback, 'setState')

2. 渲染过程

class HelloMessage extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}
HelloMessage.defaultProps = {
  name: 'world'
};

ReactDOM.render(
  <HelloMessage name="John" ref="message" key="1" />,
  document.getElementById('container')
);

// 👆jsx转换后类似如下 

class HelloMessage extends React.Component {
  render() {
    return React.createElement( "div", null, "Hello ", this.props.name );
  }
}
ReactDOM.render(
  ReactElement.createElement(HelloMessage, { name: "John", ref: "message", key: "1" })
  document.getElementById('container')
);

主要的api和类为

• React.Component
• React.createElement
• ReactDOM.render

3. diff过程

4. React 中 Element 与 Component 的区别是

5. React 中 keys 的作用是什么？最后怎么起作用

[cytle]

小点

1. createFactory 即为绑定type的createElement
2. cloneAndReplaceKey 设置新key，生成新element
3. cloneElement 时，如果设置ref则owner会变更为当前ReactCurrentOwner.current
4. creatElement
   config: {
   ...props,
   key,
   ref,
   __self, // defalut null
   __source // defalut null
   }

ReactElement = (type, key, ref, self, source, owner, props) => ({
    // This tag allow us to uniquely identify this as a React Element
    $$typeof: REACT_ELEMENT_TYPE,

    // Built-in properties that belong on the element
    type: type,
    key: key,
    ref: ref,
    props: props,

    // Record the component responsible for creating this element.
    _owner: owner,
  })