源码版本 16.8.6

地址

看看API

我们进到packages/src, 看到React.js, 其实这个文件时返回一些基本的API, 比如我们常用的Children, createRef, Component, PureComponent, createContext, forwardRef, lazy, memo 还有 hooks 等等，但我们先不看hooks

Children

这个Children方法其实是给我们处理props.children的, props.children其实就是一个类数组的东西，Children的用法有遍历React.Children.map 或者 React.Children.forEach，一般情况下我们会配合组合模式cloneElement使用， 有返回children个数 React.Children.count，另外两个不常用toArray和 only

文档

源码解析

createRef

我们看看用法

class Demo extends React.Component {
    constructor() {
        this.ref = React.createRef()
    }

    render() {
        return (
            <div>
                <Input ref={this.ref} />
                // 或者
                <Input ref={(inputRef) => this.ref = inputRef } />
            </div>
        )
    }
}

Component 和 PureComponent

Component 和 PureComponent 就是后者多了一个state 和 props 的浅比较， 也就是相当于在 Component 执行了 shouldComponentUpdate, 简单类型下，可以用PureCompnent 做组件的性能优化

createContext

在 react 16后，context 做了改变


const ThemeContext = React.createContext('light');

class App extends React.Component {
    render() {
        // 使用一个 Provider 来将当前的 theme 传递给以下的组件树。
        // 无论多深，任何组件都能读取这个值。
        // 在这个例子中，我们将 “dark” 作为当前的值传递下去。
        return (
            <ThemeContext.Provider value="dark">
                <Toolbar />
            </ThemeContext.Provider>
        );
    }
};
// 中间的组件再也不必指明往下传递 theme 了。
function Toolbar() {
    return (
        <div>
            <ThemedButton />
        </div>
    );
}
class ThemedButton extends React.Component {
    render() {
        return (
            <ThemeContext.Consumer> 
                {
                    (theme) => (
                        <Button theme={theme} />
                    )
                }

            </ThemeContext.Consumer>
        );
    }
}

forwardRef

其实就是ref 的转发, 一般情况下我们不能用ref 当做props 传递给组件的，但可以通过forwardRef 做强制转发，用的最多的是解决HOC组件传递ref的问题的

const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
));

// 你可以直接获取 DOM button 的 ref：
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;

lazy

简单说就是懒加载

memo

简单说就是 PureComponent