学习React的特征（一） - 单向数据流

本文已参与[新人创作礼]活动, 一起开启掘金创作之路。 我报名参加金石计划一期挑战——瓜分10万奖池，这是我的第一篇文章，点击查看活动详情。

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

1. 状态 => 视图
2. 事件 => 状态改变 => 视图

状态 => 视图

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的特征