React初探：從環(huán)境搭建到Hooks應(yīng)用全解析

一、React介紹

1、React是什么

React是由Facebook開發(fā)的一款用于構(gòu)建用戶界面的JavaScript庫。它主要用于構(gòu)建單頁面應(yīng)用中的UI組件，通過組件化的方式讓開發(fā)者能夠更輕松地構(gòu)建可維護(hù)且高效的用戶界面。

React的核心思想是組件化，將UI拆分成獨(dú)立且可復(fù)用的部分，每個(gè)部分被稱為組件。這種組件化的開發(fā)方式使得代碼更易于理解、維護(hù)和測試。

2、React的優(yōu)勢

• 虛擬DOM： React引入了虛擬DOM的概念，通過在內(nèi)存中構(gòu)建虛擬DOM樹，然后與實(shí)際DOM進(jìn)行比較，只對必要的部分進(jìn)行更新，提高了性能。

• 組件化： React的組件化開發(fā)模式使得代碼更具可復(fù)用性和可維護(hù)性，加速了開發(fā)過程。

• 單向數(shù)據(jù)流： React采用了單向數(shù)據(jù)流的架構(gòu)，數(shù)據(jù)的流動(dòng)是單向的，易于追蹤和調(diào)試。

• 生態(tài)系統(tǒng)： 豐富的生態(tài)系統(tǒng)和大量的第三方庫，使得開發(fā)者能夠更便捷地集成其他工具和解決方案。

二、開發(fā)環(huán)境搭建

1、使用create-react-app快速搭建開發(fā)環(huán)境

為了快速啟動(dòng)React項(xiàng)目，我們可以使用create-react-app工具。這是一個(gè)官方提供的命令行工具，它會(huì)自動(dòng)配置一個(gè)現(xiàn)代化的React開發(fā)環(huán)境，讓開發(fā)者無需關(guān)心復(fù)雜的配置。

# 使用npx創(chuàng)建React應(yīng)用
npx create-react-app my-react-app

# 進(jìn)入項(xiàng)目目錄
cd my-react-app

# 啟動(dòng)開發(fā)服務(wù)器
npm start

通過以上簡單的幾步，你就能夠在本地快速搭建一個(gè)React應(yīng)用的開發(fā)環(huán)境。在瀏覽器中打開http://localhost:3000即可查看你的第一個(gè)React應(yīng)用。

入門網(wǎng)站：https://zh-hans.react.dev/learn

三、JSX基礎(chǔ)-概念和本質(zhì)

1、什么是JSX

JSX，即JavaScript XML，是一種在JavaScript代碼中嵌入XML/HTML結(jié)構(gòu)的語法擴(kuò)展。它是React的一項(xiàng)核心特性，使得在JavaScript中編寫UI組件更加直觀和便捷。JSX看起來類似于XML/HTML，但實(shí)際上它更接近JavaScript。

在React中，JSX允許我們使用類似HTML的語法來描述UI組件的結(jié)構(gòu)，然后通過Babel等工具將其轉(zhuǎn)換為JavaScript代碼。

2、JSX的本質(zhì)

盡管JSX看起來像是HTML，但它的本質(zhì)是通過React.createElement函數(shù)轉(zhuǎn)換為React元素。React.createElement接受三個(gè)參數(shù)：類型（組件類型或HTML標(biāo)簽名）、屬性對象和子元素。這個(gè)過程被稱為JSX的“編譯”過程，它將JSX代碼轉(zhuǎn)換為React元素的層次結(jié)構(gòu)。

例如，下面的JSX代碼：

const element = <div className="my-class">Hello, React!</div>;

將被轉(zhuǎn)換為：

const element = React.createElement('div', { className: 'my-class' }, 'Hello, React!');

四、JSX基礎(chǔ)-高頻場景

1、JSX中使用JS表達(dá)式

在JSX中，我們可以使用花括號 {} 包裹JavaScript表達(dá)式，將其嵌入到JSX中。這使得我們能夠動(dòng)態(tài)地生成內(nèi)容，例如：

const name = 'World';
const greeting = <div>Hello, {name}!</div>;

2、JSX中實(shí)現(xiàn)列表渲染

使用JSX，我們可以方便地進(jìn)行列表渲染。通過使用數(shù)組的map方法，我們可以將一個(gè)數(shù)據(jù)數(shù)組映射為一組JSX元素，例如：

const items = ['Item 1', 'Item 2', 'Item 3'];
const list = <ul>{items.map(item => <li key={item}>{item}</li>)}</ul>;

3、JSX中實(shí)現(xiàn)條件渲染

在JSX中，實(shí)現(xiàn)條件渲染有多種方式，其中兩種常見的方式包括邏輯與運(yùn)算符(&&)和三元表達(dá)式。

3.1 邏輯與運(yùn)算符(&&)

使用邏輯與運(yùn)算符(&&)可以根據(jù)條件決定是否渲染特定的內(nèi)容。當(dāng)條件為真時(shí)，右側(cè)的內(nèi)容會(huì)被渲染，否則返回一個(gè)空的React元素（null），如下所示：

const isLoggedIn = true;

const loginStatus = (
  <div>
    <p>User is logged in.</p>
  </div>
);

const app = (
  <div>
    {isLoggedIn && loginStatus}
  </div>
);

在上述例子中，如果isLoggedIn為true，則loginStatus會(huì)被渲染，否則它不會(huì)出現(xiàn)在最終的渲染結(jié)果中。

3.2 三元表達(dá)式

另一種常見的條件渲染方式是使用三元表達(dá)式，它允許根據(jù)條件選擇不同的內(nèi)容進(jìn)行渲染：

const isLoggedIn = true;

const greeting = (
  <div>
    {isLoggedIn ? <p>Welcome back!</p> : <p>Please log in.</p>}
  </div>
);

在上述例子中，如果isLoggedIn為true，則渲染"Welcome back!“，否則渲染"Please log in.”。

這兩種方式都為React中的條件渲染提供了靈活的選擇，開發(fā)者可以根據(jù)具體情況選擇適合的方式。

五、React中的事件綁定

1、React基礎(chǔ)事件綁定

在React中，事件綁定是通過將事件處理函數(shù)傳遞給特定事件的屬性來實(shí)現(xiàn)的。例如，要在按鈕被點(diǎn)擊時(shí)執(zhí)行某個(gè)函數(shù)，可以使用onClick屬性：

class MyComponent extends React.Component {
  handleClick = () => {
    console.log('Button clicked!');
  };

  render() {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
  }
}

2、使用事件對象參數(shù)

如果需要在事件處理函數(shù)中訪問事件對象，可以將事件對象作為參數(shù)傳遞給事件處理函數(shù)：

class MyComponent extends React.Component {
  handleClick = (event) => {
    console.log('Button clicked!', event);
  };

  render() {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
  }
}

3、傳遞自定義參數(shù)

有時(shí)候需要將自定義參數(shù)傳遞給事件處理函數(shù)。這可以通過使用箭頭函數(shù)或.bind()方法來實(shí)現(xiàn)：

class MyComponent extends React.Component {
  handleClick = (customParam) => {
    console.log('Button clicked with custom param:', customParam);
  };

  render() {
    const customParam = 'Custom Parameter';
    return (
      <button onClick={() => this.handleClick(customParam)}>
        Click me
      </button>
    );
  }
}

4、同時(shí)傳遞事件對象和自定義參數(shù)

如果需要同時(shí)傳遞事件對象和自定義參數(shù)，可以通過在箭頭函數(shù)中調(diào)用另一個(gè)函數(shù)并傳遞參數(shù)的方式實(shí)現(xiàn)：

class MyComponent extends React.Component {
  handleClick = (event, customParam) => {
    console.log('Button clicked!', event, 'Custom param:', customParam);
  };

  render() {
    const customParam = 'Custom Parameter';
    return (
      <button onClick={(event) => this.handleClick(event, customParam)}>
        Click me
      </button>
    );
  }
}

六、React中的組件

1、組件是什么

在React中，組件是構(gòu)建用戶界面的基本單元。組件可以是函數(shù)組件或類組件，它們封裝了特定部分的UI和邏輯，使得代碼更具可復(fù)用性和可維護(hù)性。

2、React組件

React組件可以通過函數(shù)或類來定義。函數(shù)組件是無狀態(tài)的，接收一些屬性（props）并返回渲染的UI。類組件有自己的狀態(tài)（state）和生命周期方法，可以處理更復(fù)雜的邏輯。

// 函數(shù)組件
const FunctionalComponent = (props) => {
  return <div>{props.message}</div>;
};

// 類組件
class ClassComponent extends React.Component {
  render() {
    return <div>{this.props.message}</div>;
  }
}

無論是函數(shù)組件還是類組件，它們都可以被其他組件引用和嵌套，從而構(gòu)建出整個(gè)React應(yīng)用的UI。

七、useState的使用

1、useState基礎(chǔ)使用

在函數(shù)組件中，使用useState來聲明狀態(tài)。useState返回一個(gè)包含當(dāng)前狀態(tài)和更新狀態(tài)的函數(shù)的數(shù)組。基礎(chǔ)使用如下：

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

八、修改狀態(tài)的規(guī)則

1、狀態(tài)不可變

在React中，狀態(tài)是不可變的，直接修改狀態(tài)是不被允許的。因此，我們應(yīng)該使用更新狀態(tài)的函數(shù)形式，確保每次更新都是基于當(dāng)前狀態(tài)的：

// 錯(cuò)誤的方式
// count直接被修改
// setCount(count + 1);

// 正確的方式
// 使用回調(diào)函數(shù)確保基于當(dāng)前狀態(tài)更新
setCount((prevCount) => prevCount + 1);

2、修改對象狀態(tài)

當(dāng)狀態(tài)是對象時(shí)，修改其中的某個(gè)屬性時(shí)，需要保留原有對象的其他屬性。可以使用展開運(yùn)算符（spread operator）來實(shí)現(xiàn)：

const [user, setUser] = useState({ name: 'John', age: 25 });

// 錯(cuò)誤的方式
// 直接修改對象屬性，會(huì)導(dǎo)致其他屬性丟失
// setUser({ age: 26 });

// 正確的方式
// 使用展開運(yùn)算符確保其他屬性不變
setUser((prevUser) => ({ ...prevUser, age: 26 }));

九、組件的樣式處理

1、組件基礎(chǔ)樣式方案

在React中，有多種處理組件樣式的方式，其中一種是使用內(nèi)聯(lián)樣式?？梢酝ㄟ^style屬性將樣式對象傳遞給組件：

const MyComponent = () => {
  const componentStyle = {
    color: 'blue',
    fontSize: '16px',
  };

  return (
    <div style={componentStyle}>
      This is my component.
    </div>
  );
};

除了內(nèi)聯(lián)樣式，還可以使用CSS模塊、styled-components等方式來管理和應(yīng)用組件的樣式。

十、受控表單綁定

1、受控表單綁定

在React中，受控表單是指表單元素的值受React組件的狀態(tài)控制。通過使用value屬性和onChange事件，可以實(shí)現(xiàn)受控表單的綁定：

const ControlledForm = () => {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (event) => {
    setInputValue(event.target.value);
  };

  return (
    <form>
      <label>
        Input:
        <input type="text" value={inputValue} onChange={handleChange} />
      </label>
    </form>
  );
};

十一、React中獲取DOM

1、React中獲取DOM

在React中獲取DOM通常使用ref，通過ref可以引用組件或DOM元素。使用useRef來創(chuàng)建ref對象，然后將其傳遞給需要引用的組件或DOM元素：

import React, { useRef, useEffect } from 'react';

const MyComponent = () => {
  const myRef = useRef(null);

  useEffect(() => {
    // 可以在這里通過myRef.current獲取DOM元素
    console.log('Ref value:', myRef.current);
  }, []);

  return <div ref={myRef}>This is my component.</div>;
};

通過ref，可以在React中訪問和操作DOM元素，但在大多數(shù)情況下，推薦使用React的狀態(tài)和屬性來管理組件狀態(tài)和交互。

十二、組件通信

1、理解組件通信

在React中，組件通信是指組件之間如何傳遞數(shù)據(jù)和交流。組件通信是React應(yīng)用中非常重要的一部分，它可以分為父子組件通信、兄弟組件通信以及跨層級組件通信等多種形式。

2、父傳子-基礎(chǔ)實(shí)現(xiàn)

父傳子組件通信是最常見的一種方式，通過將數(shù)據(jù)通過props傳遞給子組件：

// ParentComponent.jsx
import React from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const message = 'Hello from parent!';
  
  return <ChildComponent message={message} />;
};

// ChildComponent.jsx
import React from 'react';

const ChildComponent = (props) => {
  return <div>{props.message}</div>;
};

3、父傳子-props說明

通過props傳遞數(shù)據(jù)時(shí)，可以傳遞任何JavaScript類型的數(shù)據(jù)，包括字符串、數(shù)字、對象等。子組件通過props接收父組件傳遞的數(shù)據(jù)。

4、父傳子 - 特殊的prop children

除了直接傳遞props外，React還提供了一個(gè)特殊的props，即children。通過children可以將父組件中的子組件傳遞給子組件：

// ParentComponent.jsx
import React from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  return <ChildComponent>Child content</ChildComponent>;
};

// ChildComponent.jsx
import React from 'react';

const ChildComponent = (props) => {
  return <div>{props.children}</div>;
};

5、父子組件通信-子傳父

子組件向父組件通信通常需要通過回調(diào)函數(shù)的方式，將子組件中的數(shù)據(jù)傳遞給父組件：

// ParentComponent.jsx
import React from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const handleChildData = (dataFromChild) => {
    console.log('Data from child:', dataFromChild);
  };

  return <ChildComponent sendDataToParent={handleChildData} />;
};

// ChildComponent.jsx
import React from 'react';

const ChildComponent = (props) => {
  const sendData = () => {
    props.sendDataToParent('Hello from child!');
  };

  return <button onClick={sendData}>Send Data</button>;
};

6、使用狀態(tài)提升實(shí)現(xiàn)兄弟組件通信

兄弟組件通信通常需要將共享狀態(tài)提升到它們的共同父組件中，然后通過props傳遞給兄弟組件：

// ParentComponent.jsx
import React, { useState } from 'react';
import BrotherComponentA from './BrotherComponentA';
import BrotherComponentB from './BrotherComponentB';

const ParentComponent = () => {
  const [sharedState, setSharedState] = useState('Shared State');

  return (
    <div>
      <BrotherComponentA sharedState={sharedState} />
      <BrotherComponentB sharedState={sharedState} />
    </div>
  );
};

// BrotherComponentA.jsx
import React from 'react';

const BrotherComponentA = (props) => {
  return <div>Component A: {props.sharedState}</div>;
};

// BrotherComponentB.jsx
import React from 'react';

const BrotherComponentB = (props) => {
  return <div>Component B: {props.sharedState}</div>;
};

7、使用Context機(jī)制跨層級組件通信

React提供了Context機(jī)制，可以在組件樹中傳遞數(shù)據(jù)而不必一級一級手動(dòng)傳遞。通過createContext創(chuàng)建一個(gè)Context，然后使用Provider在組件樹中提供數(shù)據(jù)，使用Consumer或useContext在組件中獲取數(shù)據(jù)。

// MyContext.js
import { createContext } from 'react';

const MyContext = createContext();

export default MyContext;

// ParentComponent.jsx
import React from 'react';
import MyContext from './MyContext';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  return (
    <MyContext.Provider value="Hello from Context!">
      <ChildComponent />
    </MyContext.Provider>
  );
};

// ChildComponent.jsx
import React, { useContext } from 'react';
import MyContext from './MyContext';

const ChildComponent = () => {
  const contextData = useContext(MyContext);

  return <div>{contextData}</div>;
};

使用Context，可以在組件樹的任意層級傳遞數(shù)據(jù)，避免了手動(dòng)逐層傳遞props的繁瑣過程。

十三、useEffect 的使用

1、useEffect 的概念理解

useEffect是React提供的一個(gè)Hook，用于處理副作用操作。副作用指的是在組件渲染過程中，可能會(huì)引起狀態(tài)變化、DOM操作、網(wǎng)絡(luò)請求等與組件狀態(tài)無關(guān)的操作。useEffect的作用類似于類組件中的componentDidMount、componentDidUpdate和componentWillUnmount生命周期方法的結(jié)合體。

2、useEffect 的基礎(chǔ)使用

import React, { useEffect } from 'react';

const MyComponent = () => {
  useEffect(() => {
    // 副作用操作，比如數(shù)據(jù)獲取、DOM操作等
    console.log('Component did mount or update');

    // 返回清除函數(shù)，可選
    return () => {
      console.log('Component will unmount');
    };
  }, []); // 依賴項(xiàng)為空數(shù)組表示僅在組件掛載和卸載時(shí)執(zhí)行

  return <div>My Component</div>;
};

3、useEffect 依賴項(xiàng)參數(shù)說明

useEffect的第二個(gè)參數(shù)是一個(gè)依賴項(xiàng)數(shù)組，表示在數(shù)組中指定的依賴發(fā)生變化時(shí)，才會(huì)重新運(yùn)行副作用操作。如果依賴項(xiàng)為空數(shù)組，則只在組件掛載和卸載時(shí)執(zhí)行副作用操作。有助于避免不必要的重復(fù)執(zhí)行。

useEffect(() => {
  // 副作用操作
}, [dependency1, dependency2]);

4、useEffect — 清除副作用

在useEffect中，可以返回一個(gè)清除函數(shù)。這個(gè)函數(shù)在組件卸載時(shí)執(zhí)行，用于清理副作用操作，比如取消訂閱、清除定時(shí)器等。

useEffect(() => {
  // 副作用操作

  // 返回清除函數(shù)
  return () => {
    // 清理副作用操作，比如取消訂閱、清除定時(shí)器等
  };
}, [dependency1, dependency2]);

清除函數(shù)不僅在組件卸載時(shí)執(zhí)行，還會(huì)在下一次副作用操作執(zhí)行之前執(zhí)行，以確保之前的副作用得到正確清理。

十四、自定義Hook實(shí)現(xiàn)

1、自定義Hook函數(shù)

自定義Hook是一種用于復(fù)用狀態(tài)邏輯的方式。它是一個(gè)函數(shù)，名稱以“use”開頭，可以在其內(nèi)部使用其他React Hook。自定義Hook讓我們能夠?qū)⒔M件邏輯提取到可重用的函數(shù)中。

import { useState, useEffect } from 'react';

const useCustomHook = (initialValue) => {
  const [value, setValue] = useState(initialValue);

  useEffect(() => {
    // 副作用操作，可以使用value等狀態(tài)
    console.log('Custom Hook effect');
  }, [value]);

  const increment = () => {
    setValue(value + 1);
  };

  const decrement = () => {
    setValue(value - 1);
  };

  return {
    value,
    increment,
    decrement,
  };
};

export default useCustomHook;

使用自定義Hook：

import React from 'react';
import useCustomHook from './useCustomHook';

const MyComponent = () => {
  const { value, increment, decrement } = useCustomHook(0);

  return (
    <div>
      <p>Value: {value}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

十五、React Hooks使用規(guī)則

1、React Hooks使用規(guī)則

在使用React Hooks時(shí)，有一些基本的規(guī)則需要遵循：

• 只能在函數(shù)組件或自定義Hook中使用Hooks： Hooks只能在函數(shù)組件、自定義Hook中調(diào)用，不可在類組件中使用。

• Hook的調(diào)用順序必須保持一致： 在同一個(gè)組件中，Hook的調(diào)用順序必須保持一致。這樣React能夠正確地將內(nèi)部的state和變量與對應(yīng)的Hook關(guān)聯(lián)起來。

• 只能在最頂層使用Hook： 不要在循環(huán)、條件語句或嵌套函數(shù)中調(diào)用Hook。確保它們在每次渲染中都是以相同的順序調(diào)用的。

• 自定義Hook以“use”開頭： 為了清晰明了，自定義Hook函數(shù)的名稱應(yīng)該以“use”開頭，這也是React官方的約定。

• 每個(gè)自定義Hook都是獨(dú)立的： 每個(gè)自定義Hook都應(yīng)該是獨(dú)立的，不應(yīng)該依賴其他自定義Hook。這樣可以確保每個(gè)Hook都是相互獨(dú)立的邏輯單元。

遵循這些規(guī)則能夠使Hooks在React組件中正確地工作，確保代碼的可維護(hù)性和清晰性。

小結(jié)

本篇博客深入探討了React的基礎(chǔ)概念和高級特性，著重介紹了React中常用的技術(shù)要點(diǎn)。首先，我們從React的基本介紹開始，了解了它的核心思想——組件化，以及為什么React在構(gòu)建用戶界面方面如此受歡迎。

隨后，我們學(xué)習(xí)了如何搭建React開發(fā)環(huán)境，使用create-react-app快速創(chuàng)建一個(gè)現(xiàn)代化的React應(yīng)用。在進(jìn)入具體的技術(shù)細(xì)節(jié)之前，我們詳細(xì)討論了JSX的概念和本質(zhì)，以及在實(shí)際開發(fā)中的高頻應(yīng)用場景，如JSX中使用JS表達(dá)式、列表渲染和條件渲染等。

接著，我們深入了解了React中的事件綁定和組件的基本概念。我們學(xué)習(xí)了如何在React中使用useState來管理組件的狀態(tài)，以及修改狀態(tài)的規(guī)則，包括狀態(tài)的不可變性和修改對象狀態(tài)的技巧。對組件的樣式處理、受控表單綁定、組件通信等主題也進(jìn)行了詳細(xì)的講解。

隨后，我們介紹了useEffect的使用，它在React中負(fù)責(zé)處理副作用操作。我們深入了解了useEffect的基本使用、依賴項(xiàng)參數(shù)的說明以及清除副作用的方式，確保我們在組件生命周期中能夠正確處理異步操作、訂閱和取消訂閱等場景。

在自定義Hook的部分，我們學(xué)會(huì)了如何抽象出可復(fù)用的邏輯單元，并且按照React官方的約定，為自定義Hook添加了“use”前綴。最后，我們總結(jié)了使用React Hooks的基本規(guī)則，以確保Hooks能夠正確工作且代碼清晰易讀。

通過這篇博客，讀者不僅能夠掌握React的基礎(chǔ)知識，還能深入了解React的高級特性和開發(fā)技巧，為構(gòu)建更加靈活、可維護(hù)的React應(yīng)用提供了有力的支持。希望本篇博客能夠成為讀者學(xué)習(xí)React的有益指南。文章來源地址http://www.zghlxwxcb.cn/news/detail-797133.html

到了這里，關(guān)于React初探：從環(huán)境搭建到Hooks應(yīng)用全解析的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！