React学习-hock钩子

React学习-hock钩子

• 什么是hock钩子？
  为了弥补函数式组件没有生命周期和状态的缺点

如何使用呢？

• 首先我们引入

import React,{useState} from 'react';

• 设置const

const [状态的名字,修改状态的方法]=useState(状态的初始值);

• 状态直接用

onClick={()=>修改状态的方法(怎么修改)}

• 只有React函数可以使用hock其他不能用
• 不能在循环条件或者嵌套中使用

生命周期

• 引入

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

• 使用

useEffect(()=>{
  console.log(1111);
})

完整代码

App.js

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

export default function App(){
  const [num,addNum]=useState(1);
  useEffect(()=>{
    console.log(1111);
  })
  return (
    <div>
      <button onClick={()=>addNum(num+1)}>点我</button>
      <span>{num}</span>
    </div>
  )
}

最终实现的效果

点击按钮数字会加一，且一开始会调到生命周期的钩子函数并打印出相应数据。