React-基础知识(三)

1.Hooks

1.在函数组件中没有state(状态),也没有声明周期

2.react hooks,可以让react函数组件也拥有状态

NO.1:useState

1.在函数组件中使用useState来定义响应式数据,接收一个参数(变量的默认值)

2.setkeyword 相当于 setState,用来修改keyword的值

代码如下

import React, { useState } from 'react';

function Demo() {
  // 定义响应式变量 show
  let [show,setShow] = useState(true);

  //点击事件
  const clickNumber = ()=> {
    //修改
    setShow(!show);           //可以多次点击
    // setShow(show=false);   //只可以点击一次
  }
  return (<div>
    <button onClick={clickNumber}>切换</button>
    <p>
      {
        show?<span>123</span>:<span>456</span>
      }
      </p>
  </div>);
}

export default Demo;

No.2:useEffect

1. 一个参数: 函数, 只要状态发生了变化, 函数就会执行,(默认先执行一次)

2. 两个参数: 函数+空数组, 只会执行一次

3. 两个参数: 函数+非空数组, 数组中的状态都发生了改变, 函数才会被调用