React組件的受控和非受控

時間 2019-11-08

標籤 react 組件受控欄目 React 简体版

原文原文鏈接

對於組件的props和state的不一樣運用方式，形成了react組件不一樣的使用方式react

平常用到的react組件，能夠分爲以下三種瀏覽器

徹底非受控組件：沒有props，沒法從外部控制組件，修改組件的狀態
徹底受控組件：props和state徹底分開，或者乾脆沒有state
薛定諤組件：部分state會被外部傳入的props所控制，但這些state在組件內部也會被控制到，因此處在受控和非受控的中間態

如下是本身的一些理解，而且爲了方便，例子都是hooks組件，請見諒bash

徹底非受控組件

// 沒有參數，傳了也不用
// 內部本身進行操做，外部沒法干涉
function Inc() {
    const [number, setNumber] = useState(0)
    
    const handleInc = () => {
        setNumber(number + 1)
    }
    
    return [
        (<p>{ number }</p>),
        (<button onClick={handleInc}>加一</button>)
    ]
}
複製代碼

這種組件通常會用在寫頁面組件，不須要進行參數的配置，全部操做都在內部ui

徹底受控組件

這類組件會把開放出來的狀態徹底交給外部控制，但不表明沒有本身內部的狀態（我理解一個組件的狀態是指的屬於它當前的props和state的集合），因此，組件徹底受控，就是state和props徹底分開，或者乾脆沒有statespa

// 子組件，徹底受控
// 姓名他老子能夠控制，想讓叫什麼就叫什麼
// 年齡他老子控制不了，不能說讓他幾歲就幾歲
function Son({name}) {
    const [age, setAge] = useState(0)
    
    // @warn 若是對useEffect不太理解，這塊能夠直接理解爲age一年加一
    useEffect(() => {
        setInterval(() => {
            setAge(prevAge => prevAge + 1)
        }, 31536000000)
    }, [])
    
    return [
        (<p>兒子姓名: {name}</p>),
        (<p>兒子年齡: {age}</p>),
    ]
}

function Dad(){
    return (
        <div>
            <Son name="6牆冬">
        </div>
    )
}
複製代碼

這種纔是日常寫組件應該追求的方式，儘可能讓組件徹底受控，不會出現以下恐怖的狀況設計

薛定諤組件

這種組件是受控仍是非受控的，難說，可是這種組件很常見3d

但願您看到這尚未煩，下邊的內容纔是重點code

1. 兒子示例

我要改一下上邊的Son組件，模擬如下他爸爸是瀏覽器之神，讓兒子幾歲就幾歲cdn

// 子組件，徹底受控
// 姓名他老子能夠控制，想讓叫什麼就叫什麼
// 年齡他老子也控制，說讓他幾歲就幾歲，可是兒子仍是有本身的成長
function Son({ageFromDad, name}) {
    const [age, setAge] = useState(ageFromDad)
    
    // @warn 若是對useEffect不太理解，這塊能夠直接理解爲age一年加一
    useEffect(() => {
        setInterval(() => {
            setAge(prevAge => prevAge + 1)
        }, 31536000000)
    }, [])
    
    // @warn 若是對useEffect不太理解
    // 這塊能夠直接理解爲若是傳入的ageFromDad改變，則設置age爲ageFromDad
    useEffect(() => {
        setAge(ageFromDad)
    }, [ageFromDad])
    
    return [
        (<p>兒子姓名: {name}</p>),
        (<p>兒子年齡: {age}</p>),
    ]
}

// 爸爸讓兒子一年長兩歲
function Dad(){
    const [ageFromDad, setAgeFromDad] = useState(0)
    
    // @warn 若是對useEffect不太理解，這塊能夠直接理解爲age一年加 二！！！
    useEffect(() => {
        setInterval(() => {
            setState(prevAge => prevAge + 2)
        }, 31536000000)
    }, [])
    
    return (
        <div>
            <Son name="6牆冬" age={ageFromDad}>
        </div>
    )
}
複製代碼