React 总结

React 总结

生命周期

三大属性

Props

• 类组件

直接用this.props就可以实现

• 函数组件

function CustomModal(props: { A:number,B:string}){
    const { A , B } = props;
}

State

• 类组件初始化

constructor(props: {}) {
    super(props);
    this.state = {
    visible: false,
    configIds:null
    }
}

• 类组件修改值

xxxx() {
    this.setState(
      { visible: false,configIds:null}
    )
}

• 类组件获取值

{this.state.visible}

• 函数组件

import React, { useState} from "react";
//声明
const initDatal: DTO.obj[] = [];
const [dataKeys, setDataKey] = useState(initDatal);
//get
dataKeys
//set
setDataKey(value)

Ref

• 1、函数组件，ref转发

  -如果函数组件，推荐用钩子，就是用useRef()取变量而不是creteRef()【当然也可以】
  ref是react唯一能拿到dom的，它操作原生dom,它会去拿类实例，如果想指向函数组件并拿取，使用ref时需要React.forwardRef()

  react forward ref的使用

• 2、类组件，ref转发（推荐）

  -极少数情况下，你可能想通过ref去引用子组件的DOM节点，但是不推荐，因为你获取的是组件实例而不是DOM节点，且它在函数组件下默认无效
  ref也支持引用回调函数的方式【低版本用到的方式】

  React中Ref 的使用方法详解