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;
相关推荐
笔尖的记忆2 分钟前
【前端架构和框架】react准备知识
前端·javascript
渣哥3 分钟前
从配置文件到 SpEL 表达式:@Value 在 Spring 中到底能做什么?
javascript·后端·面试
拜无忧12 分钟前
【小游戏】逃逸小球h5,登录背景,缺口逃逸小球多边形
前端
烛阴14 分钟前
Python 列表推导式:让你的代码更优雅、更高效
前端·python
文心快码BaiduComate14 分钟前
开工不累,双强护航:文心快码接入 DeepSeek-V3.2-Exp和 GLM-4.6,助你节后高效Coding
前端·人工智能·后端
快乐是一切18 分钟前
PDF底层格式之水印解析与去除机制分析
前端·数据结构
麋鹿原19 分钟前
Android Room 数据库之简单上手
前端·kotlin
一小池勺25 分钟前
改变上下文的 API:call, apply, bind
前端·javascript
三门37 分钟前
vue官网新读之后收获记录
前端
Keepreal49644 分钟前
使用Canvas绘制转盘
javascript·vue.js·canvas