Comments (6)
深入理解React笔记
渲染过程
from blog.
阅读源码
版本: 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
检查当前环境
- 检查当前运行时
node
版本是否支持,支持的node
版本在package.devEngines.node
中配置 - 检查当前运行时
npm
版本是否支持,支持的npm
版本在package.devEngines.npm
中配置
from blog.
入口
// 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;
};
}
from blog.
源码目录
入口
- 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
- React.Component:
- ReactDom:
src/renderers/dom/ReactDOMStackEntry.js
web- ReactDom.render:
src/renderers/dom/stack/client/ReactMount.js
- ReactDom.render:
from blog.
需要回答清楚的原理问题
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 的作用是什么?最后怎么起作用
from blog.
小点
createFactory
即为绑定type
的createElement
cloneAndReplaceKey
设置新key,生成新element
cloneElement
时,如果设置ref
则owner
会变更为当前ReactCurrentOwner.current
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,
})
from blog.
Related Issues (1)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from blog.