React 单向数据
Flag还是要立的 人气:0正文
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 特征的资料请关注其它相关文章!
加载全部内容