const {uerState}=React function Counter() { const [count, setCount] = useState(0);// 寫在外層 return (<div> count:{count} <button onClick={_ => { setCount(count + 1) }}>加一 </button> <button onClick={_ => { setCount(count - 1) }}>減一 </button> </div>) }
useState 參數是對象的時候react
import {useState} from 'react' const Greeting = () => { const [data, setDate] = useState({ count: 0, name: 'cjg', age: 19 }); const handlerClick = () => { const {count} = data; setDate({ ...data, count: count + 1 }) }; return <> {data.count} <button onClick={handlerClick}>點我</button> </> }; ==== const Greeting = () => { const [data, setDate] = useState({ hits: [ {name: 'zhangsan', id: 1}, {name: 'lisi', id: 2}, {name: 'wangwu', id: 3}, {name: 'zhaoliu', id: 4}, ] }); return ( <> {data.hits.map(value => ( <div key={value.id}>{value.name}</div> ))} </> ) };
只能在函數的最外層調用hookios
只能在React的函數組件中調用Hooksredux
屬於純命令APIaxios
import {useEffect} from 'react' //相似於componentDidMount 和componentDidUpdate,作DOM的更改操做 useEffect(()=>{ //更新文件信息 document.title = ` ${count} times`; })
出現屢次調用的反作用(下面這樣寫,頗有必要)api
useEffect(() => { document.title = `You clicked ${count} times`; }, [count]); // 只有當count的值發生變化時,纔會從新執行`document.title`這一句 useEffect(() => { console.log('compoentDidMount or componentDidUpdate');//更新後 return () => { console.log('componentWillUnmout');// 更新前 } }, [name]); 不讓他形成反作用,可是沒有目標就寫空 []
發請求的例子數組
import React, { Component, useState, useEffect } from 'react'; import axios from 'axios' const Greeting = () => { const [data, setData] = useState({ hits: [] }); useEffect(() => { const fetchData = async () => { const result = await axios( 'http://hn.algolia.com/api/v1/search?query=redux', ); setData(result.data); }; fetchData(); }, []); return ( <ul> {data.hits.map(item => ( <li key={item.objectID}> <a href={item.url}>{item.title}</a> </li> ))} </ul> ); }; export default class Lifecycle extends Component { render() { return (<div> <Greeting/> </div>) } }
Fragment 是什麼async
<></> 是 <React.Fragment/> 的語法糖 <></> 語法不能接受鍵值或屬性 import {Fragment} from 'react' <Fragment></Fragment>
發現一個我沒用過的三元表達式ide
a?3:void 0; 判斷就是用 a=1 a&&2
搜索功能函數
import React, { Component, useState, useEffect, Fragment } from 'react'; import axios from 'axios' const Greeting = () => { const [data, setData] = useState({hits: []});// 數據 const [query, setQuery] = useState('redux');//輸入的關鍵字 const [url, setUrl] = useState(//請求的url 'http://hn.algolia.com/api/v1/search?query=redux', ); useEffect(() => { const fetchData = async () => { const result = await axios(url); setData(result.data); }; fetchData(); }, [url]); return (<> <input type='text' value={query} onChange={event => setQuery(event.target.value)}/> <button onClick={() => setUrl(`http://hn.algolia.com/api/v1/search?query=${query}`) }>搜索 </button> <ul> {data.hits.map(item => ( <li key={item.objectID}> <a href={item.url}>{item.title}</a> </li> ))} </ul> </> ); };
加loadingfetch
/*加loading*/ const [isLoading, setIsLoading] = useState(false); useEffect(() => { const fetchData = async () => { setIsLoading(true);//加 const result = await axios(url); setData(result.data); setIsLoading(false);//去掉 }; fetchData(); }, [url]); 頁面 { isLoading?(<div>Loading...</div>):(數據)}
錯誤報錯
const [isError, setIsError] = useState(false); useEffect(() => { const fetchData = async () => { setIsError(false); setIsLoading(true); try { const result = await axios(url); setData(result.data); } catch (error) { setIsError(true); } setIsLoading(false); }; fetchData(); }, [url]); 頁面 {isError && <div>Something went wrong ...</div>}
經過表單也是能夠的
<form onSubmit={() => setUrl(`http://hn.algolia.com/api/v1/search?query=${query}`) event.preventDefault(); } > <input type="text" value={query} onChange={event => setQuery(event.target.value)} /> <button type="submit">Search</button> </form>
封裝成redux
const dataFetchReducer = (state, action) => { switch (action.type) { case 'FETCH_INIT': return { ...state }; case 'FETCH_SUCCESS': return { ...state }; case 'FETCH_FAILURE': return { ...state }; default: throw new Error(); } }; 再次修改後reducer const dataFetchReducer = (state, action) => { switch (action.type) { case 'FETCH_INIT': return { ...state, isLoading: true, isError: false }; case 'FETCH_SUCCESS': return { ...state, isLoading: false, isError: false, data: action.payload, }; case 'FETCH_FAILURE': return { ...state, isLoading: false, isError: true, }; default: throw new Error(); } }; const useDataApi = (initialUrl, initialData) => { const [url, setUrl] = useState(initialUrl); const [state, dispatch] = useReducer(dataFetchReducer, { isLoading: false, isError: false, data: initialData, }); useEffect(() => { const fetchData = async () => { dispatch({ type: 'FETCH_INIT' }); try { const result = await axios(url); dispatch({ type: 'FETCH_SUCCESS', payload: result.data }); } catch (error) { dispatch({ type: 'FETCH_FAILURE' }); } }; fetchData(); }, [url]);
useReducer
import React, {Component, useReducer} from 'react'; const initialState = {count: 0}; function reducer(state, action) { switch (action.type) { case 'increment': //初始化 return {count: state.count + 1}; case 'decrement': return {count: state.count - 1}; case 'reset': return {count:action.payload} } } const Greeting = () => { const [state, dispatch] = useReducer(reducer, initialState,{ type:'reset',payload:initialState }); return <> Count: {state.count} <button onClick={() => dispatch({type: 'increment'})}>+</button> <button onClick={() => dispatch({type: 'decrement'})}>-</button> </> };
useContext
我還沒理解 import React, { Component, useContext, createContext } from 'react'; const FooContext = createContext('foo'); const BarContext = createContext('bar'); const Greeting = () => { const foo = useContext(FooContext); const bar = useContext(BarContext); return ( <> <FooContext.Provider> <BarContext.Provider> {foo}, {bar} </BarContext.Provider> </FooContext.Provider> </> ) };
......................................................................................................................................................................##########################################################################################....................................................................................................................................................