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哲学一章中继续参悟。