React的函数式组件与hooks

函数式组件

• 函数组件：
• 1. 组件的第0个参数是 props - 接收父级传递过来的信息
• 2. 组件中的 return(必写) 定义该组件要渲染的内容
• 3. 没有生命周期、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