React新擴展函數(shù)setState與lazyLoad及hook介紹
更新時間：2022年12月21日 11:34:44 作者：勞埃德·福杰
這篇文章主要介紹了React新擴展函數(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>當前求和為：{this.state.count}</h1>
<button onClick={this.add}>點我+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ù)組，分別為當前狀態(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>當前求和為：{count}</h2>
<button onClick={add}>點我+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ù)，默認監(jiān)聽第一次組件掛載，和所有狀態(tài)的更新
// 如果指定為[]，只監(jiān)聽第一次組件掛載
// []里面指定什么狀態(tài)，就能監(jiān)聽該狀態(tài)的更新下面這個組件在 React 更新 DOM 后會設置一個頁面標題
import React, {useState,useEffect} from "react";
function Demo() {
const [count, setCount] = useState(0);
// 相當于 componentDidMount 和 componentDidUpdate:
useEffect(() => {
// 使用瀏覽器的API更新頁面標題
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}>點我</button>
</div>
)
}
export default Demo到此這篇關于React新擴展函數(shù)setState與lazyLoad及hook介紹的文章就介紹到這了,更多相關React setState lazyLoad hook內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關文章
大家常常關注的是網(wǎng)站圖片增加水印,而很少關注頁面水印,其實這個需求也是比較常見的,比如公文系統(tǒng)、合同系統(tǒng)等,這篇文章主要給大家介紹了關于react實現(xiàn)頁面水印效果的相關資料,需要的朋友可以參考下2021-09-09
函數(shù)式組件的基本意義就是,組件實際上是一個函數(shù),不是類,下面這篇文章主要給大家介紹了關于React中函數(shù)組件的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-08-08
這篇文章主要為大家詳細介紹了React如何實現(xiàn)Diff算法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-04-04
詳解React?如何防止?XSS?攻擊論$$typeof?的作用
這篇文章主要介紹了詳解React?如何防止?XSS?攻擊論$$typeof?的作用，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-07-07
React?antd中setFieldsValu的簡便使用示例代碼
form.setFieldsValue是antd?Form組件中的一個方法,用于動態(tài)設置表單字段的值,它接受一個對象作為參數(shù),對象的鍵是表單字段的名稱,值是要設置的字段值,這篇文章主要介紹了React?antd中setFieldsValu的簡便使用,需要的朋友可以參考下2023-08-08
這篇文章主要為大家詳細介紹了react如何自定義實現(xiàn)狀態(tài)管理,文中的示例代碼講解詳細,具有一定的借鑒價值,感興趣的小伙伴可以跟隨小編一起學習一下2024-01-01
這篇文章主要為大家介紹了React虛擬渲染實現(xiàn)50個或者100個圖表渲染的實現(xiàn)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06
React18的新特性startTransition主要是為了優(yōu)化用戶體驗,通過標記低優(yōu)先級的更新任務,如頁面重渲染,使它們不會阻塞高優(yōu)先級的緊急任務如用戶輸入響應,本文介紹React18新特性startTransition,感興趣的朋友跟隨小編一起看看吧2024-09-09
React?Native集成支付寶支付的實現(xiàn)方法
這篇文章主要介紹了React?Native集成支付寶支付的實現(xiàn)現(xiàn),ativeModules是JS代碼調(diào)用原生模塊的橋梁。所以，我們只需要在原生工程中集成支付寶和微信支付的sdk，然后使用NativeModules調(diào)用即可，需要的朋友可以參考下2022-02-02
這篇文章主要為大家介紹了React組件實例三大屬性state props refs使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09