React的高级指引

Context

Context用于多层次组件共享数据

• React.createContext：创建一个Context对象，可接受一个参数作为默认值，当组件所处的树没有Provider时，defaultValue才会生效
• Context.Provider：每个Context对象都会返回一个Provider组件，它允许消费组件订阅context的变化，Provider组件接受一个value属性，用于传递给消费组件。多个Porvider嵌套使用，里层的会覆盖外层的数据
• Context.Consumer：订阅context的变更

import React, { createContext, useState } from 'react';

interface IProvider {
    count: number;
    onDec: () => void;
    onAdd: () => void;
}
const { Provider, Consumer } = createContext<IProvider | null>(null);

const Counter = () => {
    return <Consumer>{(provider) => <span>{provider?.count}</span>}</Consumer>;
};

const CountButton = (props: any) => {
    return (
        <Consumer>
            {(provider) => (
                <button onClick={props.type === 'dec' ? provider?.onDec : provider?.onAdd}>
                    {props.children}
                </button>
            )}
        </Consumer>
    );
};

function App() {
    const [count, setCount] = useState(0);

    const provider = {
        count,
        onDec: () => setCount((count) => count - 1),
        onAdd: () => setCount((count) => count + 1)
    };

    return (
        <Provider value={provider}>
            <CountButton type="dec">-</CountButton>
            <Counter />
            <CountButton type="add">+</CountButton>
        </Provider>
    );
}

export default App;

简单理解：通过createContext创建一个Context对象，Context对象包含两个组件：Porvider和Consumer。Provider接收一个value属性用于设置共享的数据，将Provider包裹需要共享的组件。Consumer组件是用来获取共享数据的，通过Consumer包裹一个函数，函数第一个参数就是共享的数据，函数返回一个渲染内容。

Context.contextType

当需要使用共享数据时需要使用Consumer组件包裹，也可通过Context.contextType直接使用共享数据，这样就可以不使用Consumer组件了。Context.contextType只适用class形式的组件且只适用单一Context

import React, { Component, createContext } from 'react';

interface IProvider {
    count: number;
    onDec: () => void;
    onAdd: () => void;
}
const context = createContext<IProvider | null>(null);

class Counter extends Component {
    // static contextType = context

    render() {
        return <span>{this.context.count}</span>;
    }
}

Counter.contextType = context;

class CounterButton extends Component {
    // static contextType = context

    render() {
        return (
            <button onClick={this.props.type === 'dec' ? this.context.onDec : this.context.onAdd}>
                {this.props.children}
            </button>
        );
    }
}

CounterButton.contextType = context;

class App extends Component {
    constructor(props: any) {
        super(props);
        this.state = { count: 0 };
    }

    onDec = () => this.setState((state) => ({ count: state.count - 1 }));
    onAdd = () => this.setState((state) => ({ count: state.count + 1 }));

    render() {
        const provider: IProvider = {
            count: this.state.count,
            onDec: this.onDec,
            onAdd: this.onAdd
        };

        return (
            <context.Provider value={provider}>
                <CounterButton type="dec">-</CounterButton>
                <Counter />
                <CounterButton type="add">+</CounterButton>
            </context.Provider>
        );
    }
}

export default App;

通过class.contextType指定Context对象，或者使用static contextType指定，注意：static contextType是实验性的public class fields 语法

Context.displayName

此属性是用于指定React DevTools显示的内容

Refs 转发

通过ref可以访问DOM元素，但对于组件来说，组件指定的ref参数不能指定到某个内部元素，如果需要通过ref转发，即：通过React.forwardRef包装一下

import React, { forwardRef, useEffect, useRef, useState } from 'react';

const Counter = forwardRef((_, ref) => {
    const [count, setCount] = useState(0);

    return (
        <>
            <button onClick={() => setCount((count) => count - 1)}>-</button>
            <span ref={ref}>{count}</span>
            <button onClick={() => setCount((count) => count + 1)}>+</button>
        </>
    );
});

const App = () => {
    const ref = useRef(null);
    useEffect(() => console.log(ref), []);

    return <Counter ref={ref} />;
};

export default App;

当用在高阶组件时，可将ref通过一个属性，如：forwardedRef来传递到高阶组件内，然后通过forwardedRef再指定到实际的组件上

Fragments

在React中组件比如由一个根元素包裹，有时并不需要根元素包裹，想返回多个元素时，可以通过React.Fragments包裹，在渲染时不会渲染，短语法为<></>

import React, { Fragment } from 'react';

const App = () => {
    // return (
    //   <Fragment>
    //     <div>1</div>
    //     <div>2</div>
    //   </Fragment>
    // )

    return (
        <>
            <div>1</div>
            <div>2</div>
        </>
    );
};

export default App;

高阶组件

接受一个组件，返回一个新的组件便称这个组件是高阶组件。

import React, { useState } from 'react';

const Counter = (Component: any) => {
    const [count, setCount] = useState(0);
    const onDec = () => setCount((count) => count - 1);
    const onAdd = () => setCount((count) => count + 1);

    return (
        <>
            <button onClick={onDec}>-</button>
            <Component count={count} />
            <button onClick={onAdd}>+</button>
        </>
    );
};

const CounterInfo = (props: any) => {
    return <span>{props.count}</span>;
};

const App = () => Counter(CounterInfo);

export default App;