hook useRef,useState，useMemo，父传子，useReducer,@observable，useCallback

 // 返回一个可变的 ref 对象，该对象只有个 current 属性，初始值为传入的参数( id ?? '' )。
    const activeMenuKeyRef = useRef<string | number>(id ?? '');

 key[0] ?? activeMenuKey左侧的值是 null 或 undefined 时会返回问号右边的表达式。

 

 

• useState

  
  let [count, setCount] = useState(100);

  setCount(count+1)

  
  初始值是引用数据类型时

  let [count, setCount] = useState({name:'王美好'，age:18});
  //数据更新
  const updata(){

  setCount（（）=>{
  return{
  ...count,
  name:'丁晓狗'
  }
  }）}
  
  <div>{count.name}</div>
  <button onClick={updata}></button>

一进页面执行，修改状态执行

• useEffect

  useEffect(()=>{
      return ()=>{}
  }, [])
  
  

  import React, { useState, useEffect } from 'react';
   
  function Parent() {
    const [name, nameset] = useState(0)
    useEffect(() => {
      console.log(name, '更新后');
  
  
    })
    const dianji = () => {
      nameset(() => {
        return name + 1
      })
  
  
  
  
  
  
  
    }
    return (
      <button onClick={dianji}>内容{name}</button>
    )
  }

  export default Parent;

   

   

    // 加[]，在首页页面刷新执行
    useEffect(() => {
      console.log(name, '更新后');
  
    }, [])

    useEffect(() => {
      console.log(name, '开始监听');
  状态发生变化的时候return () 里面的才会被触发

  return () => { console.log(name, '取消监听'); } })

  

   

   

   

   

   useEffect(() => {
      // userId变化之后执行
    }, [userId])
    useEffect(() => {
      console.log( '开始监听');
      return () => {
        console.log( '取消监听');
      }
    },[detailId])

useMemo

useMemo它使用来做缓存用的，只有当一个依赖项改变的时候才会发生变化，否则拿缓存的值，就不用在每次渲染的时候再做计算

const grid = useMemo(() => <PanGrid {...gridProps} ref={gridRef} />, []);
  return (
        <div className='App'>
                {grid}
        </div>
    );

 

 

父传子

import React, { useState } from 'react';

import Child from './commzujian';

const Parent: React.FC = () => {
  const [count, setCount] = useState<number>(0);

  return (
    <div className="home-wrap">
      <p>当前数字：{count}</p>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        数字递增
      </button>
      <Child count={count} />
    </div>
  );
};


export default Parent;

import React from 'react';

interface selfProps {
  count: number;
}

const Child: React.FC<selfProps> = (props) => {
  const { count } = props; // 解构赋值
  return (
    <div className="child-wrap">
      <p>子组件</p>
      <p>从父组件传下来的数字是：{count}</p>
    </div>
  );
};


export default Child;

 

React.FC<selfProps> = (props) =>的复杂写法

const App: React.FunctionComponent<{ message: string }> = ({ message }) => (
    <div>{ message }</div>
);
 
//简写
interface PropsType{
  message : string;
}
const App: React.FC<PropsType> = ({ message }) => ( //{ message }相当于解构赋值，从props中解构
    <div>{ message }</div>
);

 

useReducer接收三个参数，第一个

 

@observable

 @observable 可以在实例字段和属性 getter 上使用。 对于对象的哪部分需要成为可观察的，@observable 提供了细粒度的控制。

import { observable, computed } from "mobx";

class OrderLine {
    @observable price = 0;
    @observable amount = 1;

    @computed get total() {
        return this.price * this.amount;
    }
}

 useCallback

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

//点击只执行一次
import React, { useState, useCallback } from 'react';
const Parent: React.FC = () => {
  const [num, setNum] = useState<number>(0);
  const dianji = useCallback(
    () => {
      setNum(num + 1)
    },
    [],
  );
 

  return (
    <div className="home-wrap">
      <div>{num}</div>
      <button onClick={dianji}>按钮1</button>
    </div>
  );
};


export default Parent;

结合React.memo(）  父组件向子组件传值不会频繁触发，只有状态改变的时候才会触发

import React, { useState, useCallback } from 'react';
const Parent: React.FC = () => {
  const [num, setNum] = useState<number>(0);
  const dianji = useCallback(
    () => {
      setNum(num + 1)
    },
    [],
  );
  return (
    <div className="home-wrap">
    
      <div>{num}</div>
      <button onClick={dianji}>按钮1</button>
      <Child />
    </div>
  );
};
const Child = React.memo(
  function Child() {
    console.log('子组件被触发');
    return (
      <div>
        子组件
      </div>
    );
  }
)


export default Parent;

useMemo--依赖项改变才会触发

import React, { useState, useCallback, useMemo } from 'react';
const Parent: React.FC = () => {
  const [num, setNum] = useState<number>(0);
  const dianji = () => {
    setNum(num + 1)
  }
  const [num2, setNum2] = useState<number>(0);
  const dianji2 = () => {
    setNum2(num2 + 1)
  }
  const sum = useMemo(
    () => {
      return num + num2
    }, [num, num2]
  )

  return (
    <div className="home-wrap">
    
      <div>按钮1:{num}</div>
      <div>按钮2:{num2}</div>
      <div>和:{sum}</div>
      <button onClick={dianji}>按钮1+1</button>
      <button onClick={dianji2}>按钮2+1</button>

    
    
    </div>
  );
};
export default Parent;