React State Props使用示例
Posted Androider_Zxg
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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哲学一章中继续参悟。
以上是关于React State Props使用示例的主要内容,如果未能解决你的问题,请参考以下文章