标签：count observable useRef const useReducer React num useState return

 // 返回一个可变的 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])

父传子

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;

标签：count,observable,useRef,const,useReducer,React,num,useState,return
From： https://www.cnblogs.com/111wdh/p/17176214.html

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

@observable

相关文章

赞助商

阅读排行