学无先后,达者为师

网站首页 编程语言 正文

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

作者:Flag还是要立的   更新时间: 2022-11-09 编程语言

正文

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上,此时屏幕上显示 "事件 => 状态改变 => 视图"

原文链接:https://juejin.cn/post/7143152245222309896

栏目分类
最近更新