React的hook函数

useState()方法

数据驱动UI

引入方法:

import React,{useState}from 'react'
复制代码

声明方法：

1. 函数组件

必须写在函数组件顶部
const [state,setState] =useState(data);
//data 初始值，可以是布尔值，数字，空数组，也可以从外面传进来
//state 是useState()里面第一个参数data值(数组解构)，数据驱动UI的数据
//setState 改变state数据的函数,调用该函数会重新渲染组件，重新渲染的组件useState返回的第一个值将始终是更新后最新的state.
复制代码

2. 类组件

    class App extends React Component {
       construcor(props){
         super(props);
         this.state = {
           count: 0
         };
       }
       
       render() {
         return(
            <div>
              <p>{this.state.count}</p>
              <button onclick{() => this.setState({count:this.state.count})}>+1</button>
            </div>
         )
       }
    }
复制代码

原始数据的改变，不能驱动的UI的改变，只有在state里面的数据改变才能改变UI
state只有通过set方法才能改变，如果更新函数返回值与当前State完全相同，则随后的重渲染会被完全跳过。

function Nav() {
  //声明了一个叫“tab”的state变量
  const [tab,setTab] = useState(data);
  function() {
    //将tab状态值(state)更改为’newtab‘并触发重新渲染
    setTab(newtab);
  }  
}
复制代码

var data = [1,2,3]

function Nav() {
  const [tab,setTab] = useState(data);
  
  const change = () => {
  var arr=data.map(item =>{
    return item*2
   })
  }
  setTab(arr); //[2，4，6]
}
复制代码

react中给子组件传递参数的方式：

1.第一种

const data = {
  btn:"切换"
}

父组件
function Father(){
const [tab,setTab] = useState(data)
    
  return(
    <link {...data} change={setTab}/>  //把data对象的每一项和setTab方法传递给link组件
  )
}

  
子组件
export default function Link(props){
  function cb() {
  	props.change(newData);//调用setTab改变数据为newData
  }
  return(
    <div onclick={()=>cb()}>{props.btn}</div>
  )
}
复制代码

2.第二种

{data.map(item => <link {...item} setTab={setTab} />)}
  
  export default function Link(props){
const [setTab,name] = props
    //name是data里面的数据
  function cb() {
  	setTab(newData);
  }
  } 
复制代码

useEffect语法

引入
import React, { useEffect} from 'react';
复制代码

有时候我们不希望每次渲染都执行，防止重复执行，就可以使用useEffect()，当页面第一次渲染时会执行useEffect,如果useEffect的第二个参数没有发生改变，就不会再执行。useEffect会等浏览器完成画面渲染之后才会延迟调用。

语法
useEffect(()=>{
//...希望只在组件执行一次的代码，所以useEffect的第二个参数为一个空数组
},[])
复制代码

如果不用useEffect包裹函数，当用setState改变数据的时候，useState会重新渲染组件，就会重复执行代码。
使用useEffect并将第二个参数为空数组，必然会在render第一次渲染的时候执行一次就不会再重复执行了

useEffect接受两个参数，第一个是要执行的代码，第二个是一个数组，指定一组依赖的变量，其中任何一个变量发生变化时，此effect都会重新执行一次。

    function Module(props) {
        useEffect(() =>{
            console.log(props.name)
        },[props.name]);
        return <div>Hello,{props.name}</div>
    }
复制代码