前言

今天我们一起来学习react中的函数式组件，以及took的一些用法。

一.函数式组件

理解：

函数式组件中，没有 state 和生命周期，所以又被称为无状态组件，在早期 react 版本中，被当前纯渲染组件来用

作用

主要是用来渲染内容,函数名字就是组件名。

代码示例：

import  React,{ useState} from 'react';
 
import Child from './Child'
/* 
 let [状态的值,修改状态的方法] =useState(状态的初始值);

*/

function App() {
  // console.log(this);
  // state = {
  //   data:["dd"]
  // }

  // let {data} =this.state;

  let [data,setData] =useState({
    name:'浩克',
    age:18
  }
    );


    let [show,setShow] = useState(true)
  return <div>
          {show ?<Child data={data}/>:""}
          <button onClick={()=>{
            setData({name:"疯狂浩克",age:data.age
          });

          }}>变身</button>

          <button onClick={()=>{
            setShow(false)
          }}>卸载</button>
         </div>
  
}

export default App;

函数组件注意事项

1.组件的第0个参数是props----接收父级传过来的信息

2.组件中的 return(必须写)----定义该组件要渲染的内容

3.没有生命周期,没有this,没有state

4.在16.7之前, 函数组件一直当做纯渲染组件来使用

二、React hook

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

参考：https://reactjs.org/docs/hooks-intro.html

React Hooks 优势

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

Hook 使用规则

只在最顶层使用 Hook
只在 React 函数中调用 Hook
- React 函数组件中
- React Hook 中 - 我自己定义 hook 时，可以调用别的hook
所有的 hook 必须以 use

2.常用的hook

useState

函数组件里定义状态值

? 先引用useState,接着定义

? let [状态值,修改状态的方法名]=userState(状态的初始值)

? 修改状态值方法名是自己定义的

代码示例：

App.js

import  React,{ useState} from 'react';
 
import Child from './Child'
/* 
 let [状态的值,修改状态的方法] =useState(状态的初始值);

*/

function App() {
  // console.log(this);
  // state = {
  //   data:["dd"]
  // }

  // let {data} =this.state;

  let [data,setData] =useState({
    name:'浩克',
    age:18
  }
 );
    let [show,setShow] = useState(true)
  return <div>
          {show ?<Child data={data}/>:""}
          <button onClick={()=>{
            setData({name:"疯狂浩克",age:data.age
          });

          }}>变身</button>

          <button onClick={()=>{
            setShow(false)
          }}>卸载</button>
         </div>
  
}

export default App;

Child.js

import  React,{useState,useEffect} from 'react';
function Child(props){
   let {data} = props;
   let [age,setAge] = useState(8)


   useEffect(() => {
     console.log("挂载了");

   useEffect(() =>{
     return ()=>{
       console.log("卸载了");
     }
   },[])
   useEffect(() =>{
     console.log("更新了");
   },[age])
    return <div>
            <h1>name:{data.name}</h1>
            <h1>age:{age}</h1>
            <button onClick={()=>{
              setAge(++age)
            }}>长一岁</button>
          </div>
  }
  

  export default Child

useEffect

介绍：

是一个类组件
在 componentDidMount、componentDidUpdate 和 componentWillUnmoun中使用(挂载,更新,卸载)
有两个参数第一个蚕食是回调函数,第二个参数是个数组,里面放检测的参数;
useEffect 的第二个参数，有三种情况

什么都不传，组件每次 render 之后 useEffect 都会调用，相当于 componentDidMount 和 componentDidUpdate
传入一个空数组 [], 只会调用一次，相当于 componentDidMount 和 componentWillUnmount
传入一个数组，其中包括变量，只有这些变量变动时，useEffect 才会执行

代码示例：

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

function App() {
 
  let [data,setData] =useState({
    name:'浩克',
    age:18
  }  
    );
    let [show,setShow] = useState(true)
  return <div>
          {show ?<Child data={data}/>:""}
          <button onClick={()=>{
            setData({name:"疯狂浩克",age:data.age
          });

          }}>变身</button>

          <button onClick={()=>{
            setShow(false)
          }}>卸载</button>
         </div>
  
}

export default App;

Child.js

import  React,{useState,useEffect} from 'react';
function Child(props){
   let {data} = props;
   let [age,setAge] = useState(8)


   useEffect(() => {
     console.log("挂载了");
   },[]);


   useEffect(() =>{
     return ()=>{
       console.log("卸载了");
     }
   },[])
   useEffect(() =>{
     console.log("更新了");
   },[age])
    return <div>
            <h1>name:{data.name}</h1>
            <h1>age:{age}</h1>
            <button onClick={()=>{
              setAge(++age)
            }}>长一岁</button>
          </div>
  }
  

  export default Child

挂载和更新在useEffect里面写,而卸载在return里面写

检测参数值发生变化才触发此方法 ,如果不写参数,怎样都不会触发这些方法

Ref和useefect

代码案例:

App.js代码如下:

import  React,{ useState} from 'react';
 
import Child from './Child'
function App() {
  let [data,setData] =useState({
    name:'浩克',
    age:18
  }
    );


    let [show,setShow] = useState(true)
  return <div>
          {show ?<Child data={data}/>:""}
          <button onClick={()=>{
            setData({name:"疯狂浩克",age:data.age
          });

          }}>变身</button>

          <button onClick={()=>{
            setShow(false)
          }}>卸载</button>
         </div>
  
}

export default App;

Child.js

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

function Child(props){
   let {data} = props;
   let [age,setAge] = useState(8)

  // 只要不做修改ref，就会存储初始的值(变化前的值)
  let ageP =useRef(age);

  let [txt,setTxt] =useState("文字")

  let txtP =useRef(txt);
   useEffect(() => {
    //  console.log(ageP.current,age);
     console.log(txtP.current,txt);
     txtP.current =txt;

   },[txt]);

  let message = `hahahha`
    return <div>
            <h1>name:{data.name}</h1>
            <h1 ref={ageP}>age:{age}</h1>
            <button onClick={()=>{
              setAge(++age)
            }}>长一岁</button>
            <p>{txt}</p>
            <input type="text" value={txt}
              onChange={({target})=>{
                setTxt(target.value )
              }}
              
            />

            <p dangerouslySetInnerHTML={{
              __html:message
            }}> </p>
          </div>
  }
  

  export default Child