React源码解析-React 导出了些什么
React 用了好久，是不是发现自己依然不懂 React 实现原理？只知道它的基本用法，弄不懂 React 内部流程？
本系列文章基于 React v16.8.6，每周分享2-3篇精华文章，每篇文章都是 React 中的一个关键点。欢迎评论交流。
React 导出的对象详解
直接复制的代码，在代码上面打的注释
var React = {
// ----------------------- Children 处理 ---------------------------
// 和 props.children 相关的工具函数
// props.children 不是一个严格的数组，所以添加了类似数组的工具
Children: {
// 类似array.map
map: mapChildren,
// 类似 array.forEach
forEach: forEachChildren,
// 计算 prop.children 的个数，计算直接子节点的个数
// children 为一个时不是数组，就是一个单独的 react.element
// 有多个时，是一个数组，Array.isArray(children) 为 true
// children 个数为0时， children 为 undefined
count: countChildren,
// 将 children 变为数组
// children 为 undefined 变成空数组
// 将单个的变为只有一个元素的数组
// 将是数组的 children 变成数组，差别是数组中每个元素的 key，toArray 处理之后变成 .0 .1 .2 这种标识性的 key
toArray: toArray,
// 如果只有一个直接子节点，则返回它
// 没有直接子节点或者有多个都会报错 React.Children.only expected to receive a single React element child.
only: onlyChild
},
// ---------------------------------------------------------------
// ------------------------- Component -----------------------------
// 是一个函数，执行之后返回 { current: null }，
// 用于 {childen}
// {$$typeof: Symbol(react.element), key:"1",props:{name:"lxfriday",children:{...}},ref:null}
createElement: createElementWithValidation,
// cloneElement(element, config, children)
// 以 element 元素为样板克隆并返回新的 React 元素
// 返回元素的 props 是将新的 props 与原始元素的 props 浅层合并后的结果。新的子元素将取代现有的子元素，而来自原始元素的 key 和 ref 将被保留。
// React.cloneElement() 几乎等同于：{children}
cloneElement: cloneElementWithValidation,
// 核心语句是下面两条：
// var validatedFactory = createElementWithValidation.bind(null, type);
// validatedFactory.type = type;
// 可以用 createElement 替代
createFactory: createFactoryWithValidation,
// 验证对象是否为 React 元素，返回值为 true 或 false
isValidElement: isValidElement,
// 导出 React 版本
version: ReactVersion,
unstable_ConcurrentMode: REACT_CONCURRENT_MODE_TYPE,
__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: ReactSharedInternals
};
React 常见问题
包含 JSX 的代码中为什么一定需要导入 React
来看看编译前的代码
<div ref={
r}>
<span>1</span>
</div>
babel 编译之后的代码
React.createElement("div", {
ref: r
}, React.createElement("span", null, "1"));
从编译后的代码可以看到，需要有一个 React对象，JSX 编译之后就是用的 React.createElement 来创建 render 树，所以 React 导入是必须的。
class-component 中定义的 function 为什么要绑定 this
以下为可能的三种情形
handleClick没有绑定 this，打印undefined，原因是 handleClick 是以赋值的方式被赋予 onClick，所以默认的 this 会失效，类似于display = foo.display; display();this 不是 foohandleBindClick1用箭头函数绑定 this，而且它的 this，不会被变更，打印了 TestThishandleBindClick2，用 bind(this) 绑定上下文，打印了 TestThis
class TestThis extends Component {
handleBindClick1 = () => {
console.log('handleBindClick1', this);
}
handleClick() {
console.log('handleClick', this);
}
handleBindClick2() {
console.log('handleBindClick2', this);
}
render() {
return (
<div>
<button onClick={
this.handleClick}>click not bind </button>
<button onClick={
this.handleBindClick1}>bind 1 click</button>
<button onClick={
this.handleBindClick2.bind(this)}>bind 2 click</button>
</div>
);
}
}
要注意的是，用箭头函数定义的定义的函数式作为 上下文的属性存在，而以普通函数方式定义的函数则是出现在 TestThis 的原型上
ref 有哪几种形式
function ref
<Page ref={
r => this.page = r}>xxx</Page>
object ref
const r = useRef(); // r = {current: null}
<Page ref={
r}>xxx</Page>
string ref（不推荐）
<Page ref="page">xxx</Page>
this.refs.page.xxx
关注公众号 云影sky，即送技术资料，您的支持是我最大的动力