React Hook useState()
簡單範例。
簡介
React的Function Component原本無法使用state,是stateless component(無狀態組件);不過從React 16.8加入Hook特性後便能使用state了。
Hook專屬於Function Component,Class Compoennt中不能使用Hook,不過兩種Component可搭配使用。
範例
下面是使用Class Component的一個小功能,點選"Hello, John!"文字會變成Hello, Mary!"。
App.js
import React from 'react';
import './App.css';
function App() {
return <Hello name="John" />
}
class Hello extends React.Component {
constructor(props) {
super(props)
this.state = {name: "John"}
}
render() {
return (
<h1 onClick={() => this.setState({name: "Mary"})}>
Hello, {this.state.name}!
</h1>
)
}
}
export default App;
下面改用Function Component搭配Hook的useState()
來操作state,效果同上。
import React, {useState} from 'react';
import './App.css';
function App() {
return <Hello name="John" />
}
function Hello(props) {
// 宣告state變數name並設定初值"John",回傳name及更新name的函式setName()
const [name, setName] = useState("John") // useState is a 'Hook'
// 點擊<h1>時呼叫setName()更新state變數name的值
return <h1 onClick={() => setName("Mary")}>Hello, {name}!</h1>
}
export default App;
參考github。
沒有留言:
張貼留言