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

简介: React-组件-非受控组件 和 React-组件-高阶组件

前言


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

废话不多说直接上代码:

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;



官方文档





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


  • 参数为组件,返回值为新组件的函数就可以称之为高阶组件
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;



官方文档


最后

本期结束咱们下次再见👋~

🌊 关注我不迷路,如果本篇文章对你有所帮助,或者你有什么疑问,欢迎在评论区留言,我一般看到都会回复的。大家点赞支持一下哟~ 💗

相关文章
|
6月前
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库,嵌套路由
React 的antd-mobile 组件库,嵌套路由
121 0
|
2月前
|
前端开发 JavaScript
react学习(21)受控组件
react学习(21)受控组件
|
3月前
|
存储 前端开发 JavaScript
React的受控组件与非受控组件(九)
【8月更文挑战第15天】React的受控组件与非受控组件
34 2
React的受控组件与非受控组件(九)
|
2月前
|
前端开发 JavaScript
react学习(20)非受控组件
react学习(20)非受控组件
|
3月前
|
存储 前端开发 JavaScript
React 中受控组件和非受控组件的区别
【8月更文挑战第31天】
29 0
|
3月前
|
前端开发 数据安全/隐私保护
React——受控组件和非受控组件【八】
React——受控组件和非受控组件【八】
40 0
|
4月前
|
JavaScript 前端开发
react18【系列实用教程】双向绑定表单 (2024最新版)含受控组件、非受控组件、单行多行输入框 input,下拉选择 select,单选 radio,多选 checkbox,标签 label
react18【系列实用教程】双向绑定表单 (2024最新版)含受控组件、非受控组件、单行多行输入框 input,下拉选择 select,单选 radio,多选 checkbox,标签 label
160 1
|
6月前
|
监控 前端开发 搜索推荐
react 表单受控的现代实现方案
`react-form-simple`是一个轻量级的React表单库,专注于简化受控表单的开发,提供数据绑定、验证、错误处理和UI更新等功能。它通过简洁的API减少复杂性,支持第三方UI库集成,并具备高度可扩展性。核心特点包括基于Proxy的数据绑定、实时错误处理、高效的UI更新和灵活的使用方式。通过`useForm`和`render`等钩子,开发者可以快速构建表单应用,同时支持动态表单和自定义验证规则。该库旨在提高开发效率,适用于复杂表单场景,降低学习和维护成本。
217 2
react 表单受控的现代实现方案
|
6月前
|
设计模式 前端开发 API
React的高阶组件(HOC):使用与设计模式探讨
【4月更文挑战第25天】React的高阶组件(HOC)是一种复用和增强组件的高级模式,它接受组件并返回新组件。非侵入式增强使得HOC能在不修改原有组件代码的情况下添加功能。定义HOC后,将其应用于目标组件并渲染增强后的组件。常见设计模式包括属性代理、控制反转和装饰器。然而,使用时要注意避免滥用,保持命名清晰,关注性能优化。理解并恰当使用HOC能提升React应用的构建效率。
|
6月前
|
存储 前端开发 JavaScript
React的表单处理:受控组件与非受控组件深入解析
【4月更文挑战第25天】React表单处理涉及受控和非受控组件。受控组件通过状态管理表单数据,每次用户输入都触发状态更新,确保数据同步,适合实时交互但可能影响性能。非受控组件不直接管理状态,数据存储在DOM中,简化代码,适用于更新不频繁的场景,但在数据验证和同步上存在挑战。开发者应根据需求灵活选择。