React引入了React Hooks,简单点说就是可以完全不用类来写组件,可以用函数来写组件。函数使用state只能通过useState函数。
使用例子
import React, { useState } from 'react'
import ReactDOM from 'react-dom'
function App(){
//useState的参数为初始状态值,返回了一个长度为2的数组,第一个元素就是我们类组件里的state对象,第二个元素是个函数,作用相当于类组件里用的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)
网友评论