React函数式组件及React常用hooks

React函数式组件及常用hooks

函数式组件

函数式组件简单介绍

• 函数式组件: 函数式组件本质就是一个普通函数, 接收一个props参数, 并返回一个 reactElement .

• 函数式组件中没有 this和生命周期函数, 不能使用 string ref

• 使用函数式组件时应该尽量减少在函数组件内部生命子函数, 否则, 每次组件更新时, 都会重新创建这个函数, 会导致性能比较差.

函数式组件案例代码演示: 一个简单的函数式组件

import React from 'react'
/**
 * 函数式组件: 本质就是一个函数
 *  - 函数接收一个参数: 参数是父组件传递过来的属性 props
 *  - 函数组件必须有一个返回值, 返回值是该组件要输出的内容.
 *  - 函数组件中没有this, 所以函数组件是一个无状态组件
 *  (16.8-) 无状态组件: 函数组件
 *      - 函数组件没有状态及生命周期
 *      - 函数组件也没有 this
 */

function Child(props) {
    console.log('子组件接收的props -->>',props);
    return(
        <div>
            <h2>我是子组件 -> {props.name}</h2>
        </div>
    )
}

function App() {
    return(
        <div>
            <h1>hello, React</h1>
            <Child name={"Gene"} />
        </div>
    )
}
export default App

React hooks(钩子)

React hooks 官网介绍

React hooks 是React 16.8 中新增的功能, 它们使得我们无需编写类即可使用状态和其他的 React 功能

React hooks的优势

• 简化组件的逻辑.
• 复用状态的逻辑.
• 无需使用类组件编写.

常用hook - useState

在 React 中, 通常 use 开头的都是hook, 所以后期我们自定义hook 的时候也是遵循这套规则.

useState 用来初始状态, 类似于类组件中的 state.

[state,setState] = useState(initState)
	- state 当前对应的状态
    - setState 修改 state 的方法
// useState 返回一个数组
   - 数组的第一项是初始的状态数据.
   - 数组的第二项是修改对应状态数据的方法.
    
// 注意,[state,setState], 数组中的 state和setState并不需要一定是这两个变量, 因为它是个数组,所以我们解构的时候只是按照数组对应的索引来结构,跟变量名称无关, 所以这里这两个变量是可以写成任意具有实际意义的其他变量名称的, 比如如下代码
    [name,setName] = useState('Gene')

useState 的使用案例代码如下:

import React,{useState,createRef} from 'react'
const inputRef = createRef()
function Child(props) {
    console.log('子组件接收的props--->',props);
    const {name,setName} = props;
    return(
        <div>
           <p>name:{name}</p>
            <form action="#">
                <input type="text"
                    value={name}
                    ref={inputRef}
                    onChange={({target})=>{
                        setName(target.value)
                    }}
                />
            </form>
        </div>
    )
}

function App() {
    let [name,setName] = useState('Gene');
    return(
        <div>
            <Child name={name} setName={setName} />
        </div>
    )
}

export default App

多状态的时候, 也可以初始传入一个对象,比如如下:

const [state,setState] = useState({name:'Gene',age:18})

常用hook - useEffect

useEffect 的基本使用案例演示如下:

import React,{useState,useEffect} from 'react'
/**
 *  useEffect: 直译为 副作用
 *      - useEffect(callback,数组) 接收两个参数,
 *      - 第一个参数是一个回调函数, 回调函数内部可以有一个返回值,
 *          该返回值必须是一个函数, 该返回值函数会在组件即将卸载的时候执行.
 *      - 第二个参数是一个可选数组,数组中有三个依赖.[依赖1,依赖2,依赖3].
 *  useEffect 相当于: componentDidMount,componentDidUpdate和
 *      componentWillUnmount的一个综合体
 *
 *  只希望在组件挂载之后执行某些事情(componentDidMount)
 *      如果我们只需要再组件挂载之后执行 useEffect, 我们可以直接给一个空的依赖即可 []
 *      即: useEffect(()={},[])
 */
function Child(props) {
    const {name,setName,age,setAge} = props;
    useEffect(()=>{
        console.log('组件挂载/更新/卸载了 --> ');
        return ()=>{ // 返回一个函数, 该函数只在当前组件卸载的时候执行.
            console.log('%c 組件卸載了-->>','color:red');
        }
        // 这里的监听了name依赖, 所以name改变, useEffect就会执行,
        // 无论age怎么改变,useEffect都不执行, 这样可以实现具体控制单个值
        // 来决定是否执行 useEffect的逻辑, 更加细粒度的控制, 提高性能.
    },[name]); // 如果此处的依赖数组[]是空数组, 那么只会在组件挂载时执行该 useEffect
    return(
        <div>
           <p>name:{name}</p>
            <form action="#">
                <input type="text"
                    value={name}
                    onChange={({target})=>{
                        setName(target.value)
                    }}
                />
                <br/>
                <input type="text"
                       value={age}
                       onChange={({target})=>{
                           setAge(target.value)
                       }}
                />
            </form>
        </div>
    )
}

function App() {
    let [name,setName] = useState('Gene');
    let [age,setAge] = useState(18);
    let [isShow,setIsShow] = useState('true');
    return(
        <div>
            {isShow ? (<Child
                name={name}
                setName={setName}
                age={age}
                setAge={setAge}
            />):''}
            <button onClick={()=>{
                setIsShow(false)
            }}>卸载Children</button>
        </div>
    )
}

export default App

常用hook - useRef

useRef 官网详细介绍

useRef的作用:

• 获取真实 DOM.
• 记录组件更新之前的值.

案例代码示例如下:

src/app.js

import React,{useState} from 'react'
import Child from  './Child'

function App() {
    const [name,setName]=useState("Gene");
    return(
        <div>
            <Child name={name} setName={setName}/>
        </div>
    )
}
export default App

**src/Child.js **

import React,{useState,useEffect,useRef} from 'react'
/**
 *  useRef(initRef)
 *      1. 获取真实DOM
 *      2. 记录组件更新之前的值
 */
function Child(props) {
    const {name,setName} = props;
    const [age,setAge] = useState("18");
    const div = useRef(null);
    const preVal = useRef({ // 记录两个参数
        name,age
    });
    useEffect(()=>{
        console.log(div.current);
        console.log(preVal.current);
        preVal.current = { // 每次组件更新后, 记录新的 name, age的值
            name,age
        }
    });
    return(
        <div ref={div}>
            <h1>hello, 我是Child</h1>
            姓名: <input
                    type="text"
                    value={name}
                    onChange={({target})=>{
                        setName(target.value)
                    }}
                  />
                  <span>{name}</span>
            <br/>
            <p>{age}</p>
            年龄: <input
                    type="text"
                    value={age}
                    onChange={({target})=>{
                        setAge(target.value)
                     }}
                  />
                <span>{name}</span>
        </div>
    )
}

export default Child

常用hook - useMemo

useMemo官网介绍

如果我们想在组件挂载或更新前做某些操作, 我们可以使用 useMemo 这个hook .

案例示例代码如下:

src/app.js 同上

src/Child.js

import React,{useState,useEffect,useMemo} from 'react'
function Child(props) {
    const {name,setName} = props;
    const [age,setAge] = useState("18");
    const val = useMemo(()=>{
        console.log('组件即将挂载及即将更新');
        return `姓名:${name}  年龄:${age}`
    },[name,age]);
   useEffect(()=>{
       console.log('组件挂载完成或更新完成');
   });
   console.log('组件挂载或更新');
    return(
        <div>
            <h1>hello, 我是Child</h1>
            <p>{val}</p>
            姓名: <input
                    type="text"
                    value={name}
                    onChange={({target})=>{
                        setName(target.value)
                    }}
                  />
                  <span>{name}</span>
            <br/>
            年龄: <input
                    type="text"
                    value={age}
                    onChange={({target})=>{
                        setAge(target.value)
                     }}
                  />
                <span>{age}</span>
        </div>
    )
}
export default Child

Hook 使用规则

• 只在 React 函数中调用 Hook
  • React 函数组件中
  • React Hook 中
• 只在最顶层使用 Hook, 否则会报错.