React的函数式组件与hooks

最新推荐文章于 2024-07-08 08:00:00 发布

X可乐

最新推荐文章于 2024-07-08 08:00:00 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

文章标签： react

本文链接：https://blog.youkuaiyun.com/CS_DGD/article/details/107246998

本文深入解析React中的函数式组件与Hooks特性，包括函数组件的基础、Hooks的引入及优势，如useState、useEffect和useRef的具体应用，以及Hooks的使用规则。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

函数式组件

函数组件：
1. 组件的第0个参数是 props - 接收父级传递过来的信息
1. 组件中的 return(必写) 定义该组件要渲染的内容
1. 没有生命周期、this、state
在16.7(beta)之前，函数组件一直当做纯渲染组件来使用

import React from 'react';

// 子组件
function Child(props){
  return <h1>{props.info}</h1>
}

// 子组件
function App(){
  return <Child info={"hello world"}/>
}

export default App;

hooks

React hooks 是React 16.8中的新增功能(16.7就有，但只是测试版本，正式上线是在16.8)。它们使您无需编写类即可使用状态和其他React功能

hooks 的优势是什么

简化组件逻辑
复用状态逻辑
使用了无状态组件，但又需要状态时

常用 hooks

useState

在之前版本中函数式组件是不支持状态的为了让函数式组件更好的支持状态，可以利用useState

const [state, setState] = useState(initialState);

useEffect

在函数式组件中我们没有生命周期，useEffect类似生命周期但不是生命周期

首先需要知道:
useEffect接收两个参数，第一个是处理函数，第二是依赖第一个参数相当于一旦创建就会执行。如果第二个参数传入的依赖状态改变也会自动执行如果第二个参数传入的依赖状态为空就相当于值会走一次如果不传任何状态改变都会触发第一个处理函数的执行 return 出来的这个函数只有销毁的时候才会执行

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

function Child(props){

    let [age,setAge] = useState(1);
    
    useEffect(()=>{
        console.log("组件更新了");
    },[]);

    useEffect(()=>{
        return ()=>{
            console.log("卸载时触发")
        }
    },[]);

    useEffect(()=>{
        console.log("监听的东西发生了变化")
    },[age]);

    return <div>
        <h1>{age}</h1>
        <button onClick={()=>{
            setAge(++age)
        }}>点击长一岁</button>
    </div>
}

export default Child

useRef

函数式组件的ref使用与类式组件里的使用相差不大

引入
```
import React,{useRef} from 'react';
```
创建
```
let newInput = useRef();
```
挂载
```
return <div ref={myNewRef} >...</div>
```

执行

useEffect(()=>{
    if(oldOrNew === true){
        newInput.current.focus();
    }
})

Hook 使用规则

只在最顶端使用
- 不要在循环，条件或嵌套函数中调用Hook
只在React函数中调用Hook
- React在React的函数组件中调用Hook
- 在自定义Hook中调用其他Hook