您现在的位置是：网站首页> 编程资料编程资料

React的特征单向数据流学习_React_

2023-05-24 320人已围观

简介 React的特征单向数据流学习_React_

正文

React推荐one-way单向数据流，注意只是推荐，并不强制，常见有以下两种情况:

  • 状态 => 视图
  • 事件 => 状态改变 => 视图

状态 => 视图

import React from 'react' const App = () => { //设置状态 const [data, setData] = React.useState('状态 => 视图') return ( 
 // 视图显示 
{data}
 ) } export default App

以上可看到，根据提前定义的状态，渲染到Screen上，此时屏幕上显示 "状态 => 视图"

事件 => 状态改变 => 视图

另一种的情况是由外部事件触发状态改变

import React from 'react' const App = () => { const [data, setData] = React.useState('事件 => 状态改变 => 视图') return ( 
setData(e.target.value)}/>
{data}
 ) } export default App

通过input获取事件动作，产生状态变更，渲染到Screen上，此时屏幕上显示 "事件 => 状态改变 => 视图"

以上就是React的特征单向数据流学习的详细内容后续希望在自学过程中，陆续分享更多React的特征，更多关于React 特征的资料请关注其它相关文章！

您可能感兴趣的文章:

上一篇：解决Vue input输入框卡死的问题_vue.js_

下一篇：React特征学习之Form格式示例详解_React_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网