useState

old:

class Exaple etends React.Componet {
    constructor(props){
        super(props)
        this.state = {
            count: 0
        }
    }
    
    
    return (
        <p> {this.state.count} </p>
        
        <button onClick={ ()=> this.setState({ count: this.state.count + 1 }) } > click </button>
    )

}

new

import React , {useState} from 'react'

function Example() {
    // 定義
    // 聲明一個count的state變量,初始值為0；setCount()跟新state的函數
    // useState返回一個數組，array[0],array[1]
    const [count, setCount] = useState(0)
    
    return (
        // 讀取
        //  this.state.count 改為 count
        <p> { count } </p>
        
        // 修改
        // this.state.count 改為 count
        // this.setState() 改為 setCount()
        <button onClick={ () => setCount(count + 1) } > click </button>
    )
}

其他例子

const [fruit, setFruit] = useState('apple')

useFruit('orange')

const [obj, setObj] = useState({ name: 'mike' })

//修改
//數組、對象需要賦值一個新的對象
setObj({name: 'jake'})

//新增
setObj({
    ...obj,
    age: 18
})

對象的useState設為[]會有問題

要設為null，在map的時候加?

const [projectData, setProjectData] = useState(null);

<Col span={24}>
    {projectData?.map((item: Project) => (
        <ProjectBox projectData={item} key={item.id} />
    ))}
 </Col>

useEffect

在函數組件中執行副作用操作

父調用子方法useRef

父：

 // 定義useRef
const creatFormRef = useRef(null);

// 調用子組件的方法
creatFormRef.current.restForm();

<CreateForm
  ref={creatFormRef}
/>

子 CreateForm：

import React, {useImperativeHandle, forwardRef } from 'react';

// 用useImperativeHandle暴露要調用的方法
 useImperativeHandle(ref, () => ({
    restForm: () => {
      ...
    },
}));

解決useEffect重復調用問題

https://juejin.cn/post/6844904117303934989
https://segmentfault.com/q/1010000017570341
http://www.lxweimin.com/p/dcd6bc12dbee

如果你在useEffect中使用了useState則會導致無限循環。
為了處理這個問題，我們可以給useEffect傳第二個參數。告訴react只有當這個參數的值發生改變時，才執行我們傳的副作用函數（即第一個參數）。

當我們第二個參數傳一個空數組[]時，相當于只在首次渲染的時候執行。

function Counter() {
  const [count, setCount] = useState(0);

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

useEffect 的 callback 函數中改變的 state 一定不能在該 useEffect 的依賴數組中。比如：useEffect(()=>{ setCount(count); }, [count]);依賴 count，callback 中又 setCount(count)。

WX20201223-192533.png

父組件調用子組件 --優雅方法一

  const onSubmitForm = async (data, clearForm) => {

    const res = await handeleApprove(data); //數據請求

    if (res.success) {
      clearForm()
    } else {
      message.error('提交失敗');
      return false;
    }
  };

      <Approve
        onSubmitForm={onSubmitForm}
      />

const { onSubmitForm } = props;

<Button
type="primary"
onClick={() => {
  const res = onSubmitForm(
    data,
    clearForm() //傳入清空的方法給父組件調用
  );

}}
>
提交
</Button>

父組件調用子組件 --優雅方法二

父組件調用，成功時返回值給子組件

  const onSubmitForm = async (data) => {

    const res = await handeleApprove(data); //數據請求

    if (res.success) {
      return true;
    } else {
      message.error('提交失敗');
      return false;
    }
  };

子組件接收到請求成功的返回值來清空表單：

const { onSubmitForm } = props;

<Button
      type="primary"
      onClick={() => {
        const res = onSubmitForm(
          data,
        );
        if (res) {
          clearForm()
        }