React新擴(kuò)展函數(shù)setState與lazyLoad及hook介紹
1.setState的兩種寫法
①setState(對象,[callback])
②setState(函數(shù),[callback])
函數(shù)可以接收到stata和props,callback回調(diào)函數(shù)能獲取狀態(tài)更新后的數(shù)據(jù)
寫了個Demo組件
import React, { Component } from 'react' export default class Demo extends Component { state = {count:0} add = () => { // 對象式的setState // const {count} = this.state // this.setState({count:count+1},()=>{ // console.log(this.state.count); // }) // 函數(shù)式的setState this.setState((state,props)=>{ return {count:state.count+1} }) } render() { return ( <div> <h1>當(dāng)前求和為:{this.state.count}</h1> <button onClick={this.add}>點(diǎn)我+1</button> </div> ) } }
2.lazyLoad
懶加載:需要用的加載,不需要用的不加載,一般路由組件都需要懶加載
bootstrap.css放在/public/css目錄下
/public/index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>React App</title> <link rel="stylesheet" href="/css/bootstrap.css" rel="external nofollow" > </head> <body> <div id="root"></div> </body> </html>
寫三個組件
/src/components/About/index.jsx import React, { Component } from 'react' export default class About extends Component { render() { return ( <div>About</div> ) } } /src/components/Home/index.jsx import React, { Component } from 'react' export default class Home extends Component { render() { return ( <div>Home</div> ) } } /src/components/Loading/index.jsx import React, { Component } from 'react' export default class Loading extends Component { render() { return ( <div>加載中...</div> ) } }
/src/App.js
import React, { Component,lazy,Suspense } from 'react' import {Route,Routes,Link} from 'react-router-dom' import Loading from './components/Loading' const Home = lazy(()=>import('./components/Home')) const About = lazy(()=>import('./components/About')) export default class App extends Component { render() { return ( <div> <div className="container row"> <div className="col-md-3"> <div className="list-group"> {/* 編寫路由鏈接 */} <li className="list-group-item"> <Link to="/home">Home</Link> </li> <li className="list-group-item"> <Link to="/about">About</Link> </li> </div> </div> <div className="col-md-6"> <div className="card"> <div className="card-body"> <Suspense fallback={<Loading/>}> <Routes> <Route path="/home/*" element={<Home/>}/> <Route path="/about" element={<About/>}/> </Routes> </Suspense> </div> </div> </div> </div> </div> ) } }
/src/index.js
import React from 'react' import { createRoot } from 'react-dom/client'; import {BrowserRouter} from 'react-router-dom' import App from './App' //引入App const container = document.getElementById('root'); const root = createRoot(container); root.render( <BrowserRouter> <App/> </BrowserRouter> )
3.Hook鉤子函數(shù)
Hook指能讓你不用編寫class,在函數(shù)組件里"鉤入"React state及生命周期等特性的函數(shù)。
- State Hook:useState()
- Effect Hook:useEffect()
- Ref Hook:useRef()
①useState()說明:
參數(shù):第一次初始化指定的值在內(nèi)部做緩存
返回值:包含兩個元素的數(shù)組,分別為當(dāng)前狀態(tài)和一個更新狀態(tài)的函數(shù)
自定義Demo組件
import React, {useState} from "react"; function Demo() { const [count,setCount] = useState(0); function add() { //setCount(count+1) // 第一種寫法 setCount(count => count+1) // 第二種寫法 } return ( <div> <h2>當(dāng)前求和為:{count}</h2> <button onClick={add}>點(diǎn)我+1</button> </div> ) } export default Demo
②useEffect()
useEffect就是一個 Effect Hook,給函數(shù)組件增加了操作"副作用"的能力(在組件中執(zhí)行數(shù)據(jù)獲取、訂閱或者手動修改過 DOM。我們統(tǒng)一把這些操作稱為“副作用”,或簡稱為“作用”)。
它跟 class 組件中的componentDidMount
、componentDidUpdate
和componentWillUnmount
這些生命周期函數(shù)具有相同的用途,只不過被合并成了一個 API。
useEffect(() => { // 在此執(zhí)行任何副作用操作 return () => { // 在組件卸載前執(zhí)行 // 做一些收尾工作 } }, [stateValue]) // 省略第二個參數(shù),默認(rèn)監(jiān)聽第一次組件掛載,和所有狀態(tài)的更新 // 如果指定為[],只監(jiān)聽第一次組件掛載 // []里面指定什么狀態(tài),就能監(jiān)聽該狀態(tài)的更新
下面這個組件在 React 更新 DOM 后會設(shè)置一個頁面標(biāo)題
import React, {useState,useEffect} from "react"; function Demo() { const [count, setCount] = useState(0); // 相當(dāng)于 componentDidMount 和 componentDidUpdate: useEffect(() => { // 使用瀏覽器的API更新頁面標(biāo)題 document.title = `You clicked ${count} times`; }); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); } export default Demo
③useRef()
可在函數(shù)組件中利用該函數(shù)生成的ref對象綁定一個組件,從而能夠定位該組件,拿到組件內(nèi)的數(shù)據(jù)。
Demo組件
import React, {useRef} from "react"; function Demo() { const myRef = useRef() function show() { alert(myRef.current.value) } return ( <div> <input type="text" ref={myRef} /> <button onClick={show}>點(diǎn)我</button> </div> ) } export default Demo
到此這篇關(guān)于React新擴(kuò)展函數(shù)setState與lazyLoad及hook介紹的文章就介紹到這了,更多相關(guān)React setState lazyLoad hook內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
React實(shí)現(xiàn)核心Diff算法的示例代碼
這篇文章主要為大家詳細(xì)介紹了React如何實(shí)現(xiàn)Diff算法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助2022-04-04詳解React?如何防止?XSS?攻擊論$$typeof?的作用
這篇文章主要介紹了詳解React?如何防止?XSS?攻擊論$$typeof?的作用,文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價值,需要的小伙伴可以參考一下2022-07-07React?antd中setFieldsValu的簡便使用示例代碼
form.setFieldsValue是antd?Form組件中的一個方法,用于動態(tài)設(shè)置表單字段的值,它接受一個對象作為參數(shù),對象的鍵是表單字段的名稱,值是要設(shè)置的字段值,這篇文章主要介紹了React?antd中setFieldsValu的簡便使用,需要的朋友可以參考下2023-08-08react自定義實(shí)現(xiàn)狀態(tài)管理詳解
這篇文章主要為大家詳細(xì)介紹了react如何自定義實(shí)現(xiàn)狀態(tài)管理,文中的示例代碼講解詳細(xì),具有一定的借鑒價值,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01React虛擬渲染實(shí)現(xiàn)50個或者一百個圖表渲染
這篇文章主要為大家介紹了React虛擬渲染實(shí)現(xiàn)50個或者100個圖表渲染的實(shí)現(xiàn),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-06-06React?Native集成支付寶支付的實(shí)現(xiàn)方法
這篇文章主要介紹了React?Native集成支付寶支付的實(shí)現(xiàn)現(xiàn),ativeModules是JS代碼調(diào)用原生模塊的橋梁。所以,我們只需要在原生工程中集成支付寶和微信支付的sdk,然后使用NativeModules調(diào)用即可,需要的朋友可以參考下2022-02-02