目录正文状态 => 视图事件 => 状态改变 => 视图正文 React推荐one-way单向数据流,注意只是推荐,并不强制,常见有以下两种情况: 状态 =>
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 特征的资料请关注编程网其它相关文章!
--结束END--
本文标题: React的特征单向数据流学习
本文链接: https://www.lsjlt.com/news/167786.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0