react hooks userState

React引入了React Hooks,簡單點說就是可以完全不用類來寫組件,可以用函數(shù)來寫組件。函數(shù)使用state只能通過useState函數(shù)。
使用例子

import React, { useState } from 'react'
import ReactDOM from 'react-dom'

function App(){
  //useState的參數(shù)為初始狀態(tài)值,返回了一個長度為2的數(shù)組,第一個元素就是我們類組件里的state對象,第二個元素是個函數(shù),作用相當(dāng)于類組件里用的setState。這兩個元素的名字可以隨便取,
  const [state, setState] = useState({ text: "", checked: false })
  const updateState = partialState => setState(oldState => ({
    ...oldState
    ...partialState
  }))
  return (
    <div>
      <input 
          type="text"
          value={state.text}
          onChange={e => 
            updateState({
              text: e.target.value
            })    
          }
      />
    <input 
          type="checkbox"
          value={state.checked}
          onChange={() => updateState({ checked: !state.checked })}
      />
      <ul>
        <li>{state.text}</li>
        <li>{state.checked.toString}</li>
      </ul>
  )
}

const rootElement = document.getElementById('root')
ReactDOM.render(<App />, rootElement)

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容