React的特征单向数据流学习
短信预约 -IT技能 免费直播动态提醒
正文
React推荐one-way单向数据流，注意只是推荐，并不强制，常见有以下两种情况:
- 状态 => 视图
- 事件 => 状态改变 => 视图
状态 => 视图
import React from 'react'
const App = () => {
//设置状态
const [data, setData] = React.useState('状态 => 视图')
return (
<div>
// 视图显示
<p>{data}</p>
</div>
)
}
export default App
以上可看到，根据提前定义的状态，渲染到Screen上，此时屏幕上显示 "状态 => 视图"
事件 => 状态改变 => 视图
另一种的情况是由外部事件触发状态改变
import React from 'react'
const App = () => {
const [data, setData] = React.useState('事件 => 状态改变 => 视图')
return (
<div>
<input type="text" onChange={e=>setData(e.target.value)}/>
<p>{data}</p>
</div>
)
}
export default App
通过input获取事件动作，产生状态变更，渲染到Screen上，此时屏幕上显示 "事件 => 状态改变 => 视图"
以上就是React的特征单向数据流学习的详细内容后续希望在自学过程中，陆续分享更多React的特征，更多关于React 特征的资料请关注编程网其它相关文章！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
