React State Props使用示例

前言

感悟

這幾天擼React代碼，在擼之前沒有仔仔細細閱讀官方文檔，拿着功能需求按照以往其他語言編程經驗及隨用隨查的API進行開發。發現這個過程是痛苦的，每百度一個簡單的功能實現，都會耗費巨大的盡力和篩選有效信息時間，其實靜下心來花費一定時間完整閱讀官方文檔很有必要，因爲官方文檔能夠涵蓋大部分開發場景。

場景

在理解了(我以爲自己理解了)sate&props後，需要實現一個如下功能組件：輸入框，外部可以設置初始值及修改輸入框內容，且外部需要感知輸入框改變。於是我就擼了下邊代碼：

import React from 'react'

export default function TemperatureInput(props) {
    const onChanged = (e) => {
        console.log("e:", e.target.value)
        if (props.onChanged != null) {
            props.onChanged(e.target.value)
        }
    }
  
    React.useEffect(() => {
        console.log("Temperature")
    });
    return <div>
        <input value={props.initvalue} onChange={onChanged}></input>
    </div>
}

外部引用：

 <TemperatureInput initvalue='100' onChanged={onChanged}/>

const onChanged = (temp)=>{
       console.log("temp:",temp)
   }

結果發現輸入框倒是正常顯示100了，但是數值不可變了。點擊輸入框輸入數字，輸入框數字不變。然後翻文檔理解到props是父組件傳給子組件不可變的，自己維護的state纔是可變的，於是寫出如下代碼功能正常：

import React from 'react'

export default function TemperatureInput(props){
    
    const onChanged = (e)=>{
        setInitValue(e.target.value)
        console.log("e:",e.target.value)
        if(props.onChanged != null){
            props.onChanged(e.target.value)
        }
    }
    const [initValue,setInitValue] = React.useState(props.temp)
    React.useEffect(() => {
        console.log("Temperature")
      });

    
    return <div>
        <input value={initValue} onChange={onChanged}></input>
    </div>
}

父組件使用：

 <TemperatureInput temp='100' onChanged={onChanged}/>

功能正常，沾沾自喜。

糾正

閱讀了React官方文檔後，理解了上述寫法不能說是錯誤的，至少是不規範的，與React的思想是相左的，根據React哲學及官方示例，這個組件應該是這樣寫：

參考:https://zh-hans.reactjs.org/docs/thinking-in-react.html

import React from 'react'

export default function TemperatureInput(props){
    
    const onChanged = (e)=>{
        console.log("e:",e.target.value)
        if(props.onChanged != null){
            props.onChanged(e.target.value)
        }
    }
    React.useEffect(() => {
        console.log("Temperature")
      });

    return <div>
        <input value={props.temp} onChange={onChanged}></input>
    </div>
}

外部使用：

    const onChanged = (temp)=>{
        setTemp(temp)
        console.log("temp:",temp)
    }

    const [temp,setTemp] = React.useState('100');

<TemperatureInput temp={temp} onChanged={onChanged}/>

可以看出React官方給出的思想是，組件應該拆分到最細化(這個組件功能單一)，場景中input組件其功能僅僅是展示內容和通知外部變化，不應該維護過多內容。(原文：一個組件原則上只能負責一個功能。如果它需要負責更多的功能，這時候就應該考慮將它拆分成更小的組件。)

其實我也沒有完全理解透，初學者可以根據官方文檔React哲學一章中繼續參悟。