React-组件-非受控组件 和 React-组件-高阶组件

前言

image-20220504201203764

• 非受控组件也就是值，不受到 React 控制的表单元素就是非受控组件

废话不多说直接上代码：

代码语言：javascript复制

import React from 'react';

class App extends React.PureComponent {
    constructor(props) {
        super(props);
        this.myRef = React.createRef();
    }

    render() {
        return (
            <form onSubmit={(event) => {
                this.submit(event)
            }}>
                <input type="text" ref={this.myRef}/>
                <input type="submit"/>
            </form>
        )
    }

    submit(event) {
        // 禁止默认行为
        event.preventDefault();

        console.log(this.myRef.current.value);
    }
}

export default App;

官方文档

• https://zh-hans.reactjs.org/docs/uncontrolled-components.html

高阶组件(Higher-Order Components，简称为 HOC)

• 参数为组件，返回值为新组件的函数就可以称之为高阶组件

代码语言：javascript复制

import React from 'react';

class Home extends React.PureComponent {
    render() {
        return (
            <div>Home</div>
        )
    }
}

function enhanceComponent(WrappedComponent) {
    class AdvComponent extends React.PureComponent {
        render() {
            return (
                <div>
                    <WrappedComponent/>
                </div>
            )
        }
    }
    return AdvComponent;
}

const AdvComponent = enhanceComponent(Home);

class App extends React.PureComponent {
    render() {
        return (
            <div>
                <AdvComponent/>
            </div>
        )
    }
}

export default App;

官方文档

• https://zh-hans.reactjs.org/docs/higher-order-components.html#gatsby-focus-wrapper

输入图片说明

最后

本期结束咱们下次再见