react高阶组件及hooks

高阶组件

一个函数可以接受另一个函数作为参数

例如

js 复制代码
// App.js
import Children from "./children";
function App() {
    return ( 
        <div>
            <Children/>
        </div>
     );
}

export default App;
// children.js
import  Components from "./components.js";
function Children(props) {
    return ( 
        <div>我的姓名:{props.name}</div>
     );
}

export default Components(Children);
// Components.js
import { Component } from "react";

function CompentUnit(Compnent) {
    return class extends Component{
        constructor(){
            super();
            this.state = {
                name: '张三'
            }
        }
        render(){
            return (
                <Compnent {...this.state}/>
            )
        }
    }
}

export default CompentUnit;

hooks

React Hooks 的意思是,组件尽量写成纯函数,如果需要外部功能和副作用,就用钩子把外部代码"钩"进来

react hooks:

useState

useEffect

useRef

useReducer

useState

js 复制代码
import { Component } from "react"
class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            number: 1
        } 
    }
    state = {}
    render() {
        return (
            <div>
                {this.state.number}
                <button onClick={() => this.addClick()}>点击</button>
            </div>
        );
    }
    addClick() {
        let num = this.state.number;
        this.setState(
            {
                number: ++num
            }
        )
    }
}

export default App;

useEffect

useEffect 使用方法 useEffect(()=>{ 参数方法 },[依赖参数])

useEffect未写依赖参数。为undefined

js 复制代码
import { useEffect,useState } from "react"
function App() {
    const [name, setName] = useState('张三')
    useEffect(()=>{
        console.log('修改了');
    })
    return ( 
        <div>
            <h1>{name}</h1>
            <button onClick={()=>{
                setName('王五')
            }}>修改姓名</button>
        </div>
     );
}

export default App;

useEffect 未填写依赖参数 。[]

js 复制代码
import { useEffect,useState } from "react"
function App() {
    const [name, setName] = useState('张三')
    useEffect(()=>{
        console.log('修改了');
    },[])
    return ( 
        <div>
            <h1>{name}</h1>
            <button onClick={()=>{
                setName('王五')
            }}>修改姓名</button>
        </div>
     );
}

export default App;

useEffect 填写依赖参数 [状态]

js 复制代码
import { useEffect,useState } from "react"
function App() {
    const [name, setName] = useState('张三')
    useEffect(()=>{
        console.log('修改了name');
    },[name])
    return ( 
        <div>
            <h1>{name}</h1>
            <button onClick={()=>{
                setName('王五')
            }}>修改姓名</button>
        </div>
     );
}

export default App;

useContext

js 复制代码
import { createContext,useContext,useState } from "react"
const context = createContext();
function Children (){
    const {name, setName} = useContext(context)
    
    return (
        <div>
            <h1>{name}</h1>
            <button onClick={()=>{
                setName('王五')
            }}>修改姓名</button>
        </div>
    )
}

function Father() {
    return (
        <Children/>
    )
}


function App() {
    const [name, setName] = useState('李四')
    return ( 
        <context.Provider value={{name,setName}}>
            <Father/>
        </context.Provider>
     );
}

export default App;

useReaducer

js 复制代码
import { useReducer } from "react"
function App() {
    const disopseFn = (state, action) => {
        console.log(state,action);
        
        switch (action.type) {
            case 'change':
                return { ...state, ...action.value };
            default:
                throw new Error()
        }
    }
    const [props, disopse] = useReducer(disopseFn, { name: '李四', age: 12 })
    return (
        <div>
            <h1>姓名:{props.name}</h1>
            <h1>年龄: {props.age}</h1>
            <button onClick={() => 
                disopse({ type: 'change', value: { name: '张三' } })
            }>修改姓名</button>
        </div>
    );
}

export default App;
相关推荐
天天扭码17 分钟前
2025年了,npm 与 pnpm我们该如何选择
前端·javascript·npm
烛阴19 分钟前
10个JavaScript编程技巧,助你成为高效开发高手!
前端·javascript
去伪存真19 分钟前
ESLint + Husky 如何只扫描发生改动的文件?
前端·eslint
s91236010136 分钟前
rust REGEX和lazy_static 和struct 混用
java·前端·javascript
vvilkim1 小时前
React 与 Vue 虚拟 DOM 实现原理深度对比:从理论到实践
前端·vue.js·react.js
天天扭码1 小时前
在项目中常见的main.js和main.mjs有什么区别,我们该如何选择?
前端·javascript·面试
姑苏洛言1 小时前
在开发扫码小程序中,遇到胡坑“require() 默认不支持绝对路径”及其解决方案
前端
Passerby_K1 小时前
vue3+dhtmlx 甘特图真是案例
前端·vue·甘特图
佳腾_1 小时前
【Web应用服务器_Tomcat】二、Tomcat 核心配置与集群搭建
java·前端·中间件·tomcat·web应用服务器
brzhang2 小时前
代码即图表:dbdiagram.io让数据库建模变得简单高效
前端·后端·架构