從 React 組件分鐘分析 React.API 的使用場景

api 基礎與實踐分析

值得 await 的 React.useState

useState 使用很簡單，可是爲了不過多的 re-render, 儘量的少的定義 useState. 在開發的時候，能使用 useRef 代替的儘可能使用 useRef 代替。因此規則是：

• 最少的 useState 定義（在 react 中可能要更新批量更新 useState 的 setState）

const page = () => {
    // 假如咱們的頁面裏面有不少的 select
    const [selectList1, setSelectList1] = useState([])
    const [selectList2, setSelectList2] = useState([])
    const [selectList3, setSelectList3] = useState([])
    
    const getSelectData = async () => {
    const res = awiat request({
           url: 'your_path',
           options: {
               methods: 'get',
               params: {count, pageSize: count}
           }
       })
       
       setSelectList1(res.result.data1) // re-render 1
       setSelectList2(res.result.data2) // re-render 2 
       setSelectList3(res.result.data3) // re-render 3
    }
    
    useEffect(() => {
           getSelectData()
    }. [])
    
    return (
        <div> {selectList1.map((item) => { return item.name})} {selectList2.map((item) => { return item.title})} {selectList3.map((item) => { return item.age})} </div>
    )
}
複製代碼

• 不要定義過多的 state

• state 是在試圖展現的更新用的，有些不須要到試圖的，放在內存裏面就能夠了，推薦使用 useRef 保存

• 異步的 setState 的問題，使用異步函數來解決

const page = () => {
    const [count, setCount] = useState<number>(1)
    
    return (
        <div> <button onClick={async () => { await setCount(count + 1); const res = awiat request({ url: 'your_path', options: { methods: 'get', params: {count, pageSize: count} } }) // other }}>+1</button> </div>
    ) 
}
複製代碼

全部說 async/await 可能更加般配歐

React.cloneElement

1. React.clone API是單獨的克隆一個 React 組件或者 DOM 節點。克隆以後咱們就能夠方便的在上面給 props。

import React from 'react'

const TestClone = (props) => {
    const [visiable, setVisiable] = react.useState<boolean>(false);
    const {trigger, children} = props;
    
    return (
        <div> {visiable ? <div> {children} </div> : null} {React.cloneElement(trigger, {trigger.props, onClick: () => { setVisiable(!visiable) })} </div>
    )
}

export default TestClone;
複製代碼

說明：

• trigger 是一個React 節點，使用 React.cloneElement API 方便的克隆一個這個節點，而後在它基礎上添加了新的點擊事件。因而當咱們點擊 trigger 的時候，就會切換 children 節點的現實與隱藏。

這樣作的好處，一個節點暴露給外部，狀態在內部維護。

總結：cloneElement 是一個很靈活的 API， 得益於第二參數能夠用來組合不一樣的 props。生成一個新的節點。若是你須要對當前的節點 props 進行增刪改查操做。使用 cloneElement 是一個很不錯的選擇。

React 中如何獲取子組件的中的數據

場景：咱們以偶一個上傳組件的封，在上傳以前，須要獲取 token，其實咱們並不關心 token, 只是關心上傳以後，服務器返回的數據，這些數據也不須要須要響應到頁面。因此可能並不須要使用 useState 定義響應數據

• API React.useImperativeHandle

useImperativeHandle 鉤子函數，須要與 React.forward 來進行配合使用。useImperativeHandle 鉤子函數接受兩個參數，第一個就是傳入子組件的 ref, 第二參數是 函數，此函數返回的是咱們能在父組件中訪問的數據。

使用：

1. 父組件中定義 ref
2. 在父組件中使用子組件，並綁定 ref 屬性
3. 子組件配合 forwardRef 使用，拿到 ref
4. 綁定 useImperatoveHandle 綁定目標數據
5. ref 指向 dom 或者其餘子組件的值

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

const ChildComponent = React.forwardRef((props, ref) => {

    const [data1, setData1] = useState(1)
    
    const onClick = () => {
        // your code
    }
    useImperativeHandle(ref, () => ({
        data: data1,
        dom1： ref.current,
        event1: onClick
    })) 
    
    return (
        <div ref={ref} onClick={onClick}> react- component - children- data - get methods </div>
    )
})
複製代碼

方便的從組件中拿到，咱們想要的數據，而不須要定於多餘的 state, setState。

Reactc.Children

問題

1. React 爲何要單獨提提供操做 React.Children 的 API？
2. React.Children 解決了什麼問題？

useRef 中定義的數據，會 使得 useEffect 中的 effect 函數，被調用嗎？

其實若是咱們想讓一個頁面刷新，其實就是在 useEffect 中只執行一次的，要它強制更新一次。

• statas 是會更新試圖
• ref 的變化，理論上也使得反作用從新執行