日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

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

欄目分類
最近更新