日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

React新擴展函數setState與lazyLoad及hook介紹_React

作者：勞埃德·福杰 ? 更新時間： 2023-01-23 編程語言

1.setState的兩種寫法

①setState(對象,[callback])

②setState(函數,[callback])

函數可以接收到stata和props，callback回調函數能獲取狀態更新后的數據

寫了個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);
    // })
    // 函數式的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  href="/css/bootstrap.css"  >
  </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鉤子函數

Hook指能讓你不用編寫class，在函數組件里"鉤入"React state及生命周期等特性的函數。

  • State Hook：useState()
  • Effect Hook：useEffect()
  • Ref Hook：useRef()

①useState()說明：

參數：第一次初始化指定的值在內部做緩存

返回值：包含兩個元素的數組，分別為當前狀態和一個更新狀態的函數

自定義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，給函數組件增加了操作"副作用"的能力(在組件中執行數據獲取、訂閱或者手動修改過 DOM。我們統一把這些操作稱為“副作用”，或簡稱為“作用”)。

它跟 class 組件中的componentDidMount、componentDidUpdate和componentWillUnmount這些生命周期函數具有相同的用途，只不過被合并成了一個 API。

useEffect(() => {
    // 在此執行任何副作用操作
    return () => { // 在組件卸載前執行
        // 做一些收尾工作
    }
}, [stateValue])
// 省略第二個參數，默認監聽第一次組件掛載，和所有狀態的更新
// 如果指定為[]，只監聽第一次組件掛載
// []里面指定什么狀態，就能監聽該狀態的更新

下面這個組件在 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()

可在函數組件中利用該函數生成的ref對象綁定一個組件，從而能夠定位該組件，拿到組件內的數據。

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

原文鏈接：https://blog.csdn.net/YINZHE__/article/details/128378055

欄目分類
最近更新