react hooks的简单使用

1 useState()

buttons.js

import React, {useState} from 'react';
import {Button} from 'antd';export default function Buttons() {const [buttonText, setButtonText] = useState('确定');function handleClick() {return setButtonText('点击完成');}return (<Button onClick={handleClick}>{buttonText}</Button>);
}

app.js

import React, {useContext} from 'react';
import './App.css';
import Buttons from './buttons';function App() {return (<div className="App"><Buttons /></div>);
}export default App;

2 useContext

import React, {useContext} from 'react';
import './App.css';
import Buttons from './buttons';const AppContext = React.createContext({});
const Navbar = () => {const {username} = useContext(AppContext);
return (<div>Navbar: {username}</div>);
}
const Message = () => {const {username} = useContext(AppContext);
return (<div>Message: {username}</div>);
}
function App() {return (<AppContext.Provider value={
   {username: 'shj'}}><div className="App"><Navbar /><Message /></div></AppContext.Provider>// <div className="App">//     <Buttons />// </div>);
}export default App;

3 useReducer

import React, {useReducer} from 'react';
import './App.css';
import {Button} from 'antd';const MyReduce = (state, action) => {if (action.name === '+') {return {...state, id: state.id + 1}}if (action.name === '-') {return {...state, id: state.id - 1}}return {...state, id: state.id}
};
function App() {const [state, dispath] = useReducer(MyReduce, {id: 100});return (<div className='App'><Button onClick={() => dispath({name: '+'})}>Add</Button><Button onClick={() => dispath({name: '-'})}>reduce</Button><Button onClick={() => dispath({name: 'q'})}>reduce</Button><hr />{state.id}</div>  );
}export default App;