react 使用总结

接触react 也有一段时间了

1. 虽说自己已经开发react 两周了, 对于基本的使用以及没有问题了,但是对于react组件以及原理上的问题, 还是有所欠缺的, 这一方面还是不断补强,

比如 说 useState 更新(同步异步, 如何拿到精确的值), 闭包同时会对useState最新状态值产生影响, (需要使用ref解决, (类似this))
以及useEffect 的, 回调传参(精确更新), return 函数, 减少副作用的使用(定时器) 对于引用类型更新时, 需要做一层拷贝, 返回新对象(不能使用原有指针)[…xxx](json方法
useRef 如何使用, 拿到及时更新的值

useRef 的理解: 添加链接描述

参考: 添加链接描述

对于函数式组件默认组件属性值, 依旧可以使用 defaultProps 来实现对应的功能

---

const Index1 = (props) => {
  const {age='默认年龄'}=props
  console.log('index组件',Index);
  useEffect(() => {
    console.log(props);
  }, [props]);
  return (
    <>
    {props.state}
    <div>
      useeffect使用1
      { props.name}
      {age}
    </div>
    </>
  );
}
Index1.defaultProps={name:'默认属性值'}
-----------------------------------------------------------------------
//useEffect 使用, 可以用于接口请求(初始化, 更新周期周期)
// effect（副作用）：指那些没有发生在数据向视图转换过程中的逻辑，
// 如 ajax 请求、访问原生dom 元素、本地持久化缓存、绑定/解绑事件、添加订阅、设置定时器、记录日志等。
const Index1 = (props) => {
  console.log('index组件',Index);
  useEffect(() => {
    console.log(props);
  }, [props]);
  return (
    <>
    {props.state}
    <div>
      useeffect使用1
      { props.name}
    </div>
    </>
  );
}
Index1.defaultProps={name:'默认属性值'}

---

class 与 function 组件差别

import React from 'react';
import {memo, useState, useCallback } from 'react';
// const {memo, useState}=React

// useMemo 可以用于复杂数据计算, 
// useCallback 用于防止重复render, (精确更新) 用于对函数的处理

class IndexClass extends React.Component{
  constructor(props){
      super(props)
      this.state={
          number:0
      }
  }
  handerClick=()=>{
     for(let i = 0 ;i<5;i++){
         setTimeout(()=>{
             this.setState({ number:this.state.number+1 })
             console.log('class组件',this.state.number)
         },1000)
     }
  }

  render(){
      return <div>
          <button onClick={ this.handerClick } >num++</button>
      </div>
  }
}

function IndexFun(){
  const [ num ,setNumber ] = useState(0)
  const handerClick=()=>{
      for(let i=0; i<5;i++ ){
         setTimeout(() => {
              setNumber(num+1)
              console.log('函数',num)
         }, 1000)
      }
  }
  return <button onClick={ handerClick } >{ num }</button>
}


const Index = () => {
  return (
    <div>
      <IndexClass />

      <IndexFun />
    </div>
  );
}

export default Index;

Q: 函数式组件与 class 组件的差异???