React引入了React Hooks,簡單點(diǎn)說就是可以完全不用類來寫組件,可以用函數(shù)來寫組件。函數(shù)使用state只能通過useState函數(shù)帆卓。
使用例子
import React, { useState } from 'react'
import ReactDOM from 'react-dom'
function App(){
//useState的參數(shù)為初始狀態(tài)值,返回了一個(gè)長度為2的數(shù)組米丘,第一個(gè)元素就是我們類組件里的state對(duì)象剑令,第二個(gè)元素是個(gè)函數(shù),作用相當(dāng)于類組件里用的setState拄查。這兩個(gè)元素的名字可以隨便取吁津,
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)