React（7）语法学习{hook、useState组件状态、生命周期useEffect、Redux}

hook

useState组件状态

// rfc 函数组件快捷方式
// react16.8版本后hook特性 函数组件使用 useState
// useState 函数组件使用state
// 1.引入useState
import React,{useState} from 'react'

export default function App() {
  // 2. useState state 和setState方法
  // 参数1 state的名称 参数2 修改state的方法 参数3 state的默认值
  // 想当于rcc 中 state = {num:1}
  const [num, setNum] = useState(1)
  // 声明定义一个state
  const [count, setCount] = useState(100)
  // 练习 state 存储count值默认100 每次点击按钮+10
  return (
    <div>
      {num}
      <button onClick={()=>setNum(num+1)}>{num}</button>
      <button onClick={()=>setCount(count+10)}>{count}</button>
    </div>
  )
}

生命周期useEffect

// 函数组件hook特性,提供函数组件生命周期使用
// useEffect
// 1.导入useEffect
import React, { useEffect, useState } from "react";

export default function App() {
  // useState
  const [show, setShow] = useState(false);
  return (
    <div>
      父组件
      {/* 调用子组件 */}
      <button onClick={() => setShow(!show)}>显示/隐藏</button>
      {show ? <Son /> : null}
    </div>
  );
}
function Son() {
  const [num, setNum] = useState(1);
  // 练习 监控count值的变化
  // 更新前和更新后值变化
  const [count, setCount] = useState(100);
  // 第一段 挂载或者更新
  // 第二段 将要卸载
  // 第三段 监控数据变化
  useEffect(() => {
    // componentDidMount和componentDidUpdate结合
    // console.log("挂载和刷新触发了");
    // 更新后的数据
    console.log("num更新后:", num);
    // console.log("count更新后:", count);
    return () => {
      // componentWillMount 将要卸载触发
      // console.log("将要卸载触发了");
      console.log("num更新前:", num);
      // console.log("count更新前:", count);
    };
    // [input] 监控组件状态的变化 没有监控的值,就写[]
  }, [num]);
  useEffect(() => {
    console.log("count更新后:", count);
    return () => {
      console.log("count更新前:", count);
    };
  }, [count]);
  return (
    <div style={{ border: "2px solid green" }}>
      <div>这是子组件</div>
      <button onClick={() => setNum(num + 1)}>{num}</button>
      <br />
      <button onClick={() => setCount(count + 10)}>{count}</button>
    </div>
  );
}

Redux

安装命令

src\index.js

/***
 *  Vuex: vue的全局状态管理工具 5个核心概念
 *  State  存储共享变量的
 *  Getters 计算属性
 *  Mutaions 修改方法  只能通过它定义的方法进行修改
 *  Actions  异步操作
 *  Modules  拆分模块
 *
 *  5个概念组成称为一个store /src/store/index.js
 *  存 修改
 *  this.$store.commit('方法名称',参数)
 *
 *  读
 *  组件值读取  this.$store.state.xxxx
 *  语法糖   ...mapState  写在计算属性中
 *
 *
 * Vuex对用Redux
 * Vuex                    Redux
 * state                   state   初始化值
 * mutations               reducer  定义修改方法
 * this.$store.commit()    this.store.dispatch() 修改
 * this.$store.state.xxx   this.store.getState(xxx) 读取
 */
// 导入createStore 从redux
import { createStore } from "redux";
// 1.状态初始化
const iniState = {
  num: 1,
};
// 2.定义修改方法
// 第一个参数 初始值
// 第二个参数 action形参 操作方法的名称 传对象格式 type属性存储操作方法名称
// 参数格式:action={type:'doAdd'}
const reducer = (state = iniState, action) => {
  switch (action.type) {
    case "doAdd":
      // ...state 展开默认state
      // 修改对应state后面的值,其它的值不修改返回
      return { ...state, num: state.num + 1 };
    default:
      break;
  }
};
// 3.创建store管理reducer
const store = createStore(reducer);
// 4.操作store
// 读取
// console.log(store.getState());
// 修改
store.dispatch({ type: "doAdd" });
store.dispatch({ type: "doAdd" });
store.dispatch({ type: "doAdd" });
console.log(store.getState());

// 作业: 存储一个count的值,定义方法每次+10 实现修改和读取操作