1. React概述

1.1 React是什么

• React是一個(gè)用于構(gòu)建用戶界面的JavaScript庫。
• React的主要特點(diǎn)是組件化、聲明式編程以及高效的DOM更新機(jī)制。
• React由Facebook開發(fā)并開源，已經(jīng)成為目前最流行的前端框架之一。

1.2 React的特點(diǎn)

• 聲明式編程：React采用聲明式編程模式，使得代碼更加易于閱讀和理解。
• 組件化：React將頁面分解成多個(gè)組件，每個(gè)組件都有自己的狀態(tài)和生命周期，方便復(fù)用和維護(hù)。
• 單向數(shù)據(jù)流：React采用單向數(shù)據(jù)流的模式，父組件通過props向子組件傳遞數(shù)據(jù)，子組件通過回調(diào)函數(shù)向父組件傳遞數(shù)據(jù)。
• 虛擬DOM：React采用虛擬DOM的技術(shù)，通過對比前后兩個(gè)虛擬DOM的差異，最小化頁面的重繪和回流，提高頁面的性能和響應(yīng)速度。
• 高效：React采用高效的算法和機(jī)制，使得頁面的渲染速度更快，用戶體驗(yàn)更佳。

1.3 React的優(yōu)點(diǎn)

• 更好的用戶體驗(yàn)：React采用虛擬DOM，能夠更快地更新頁面，提升用戶體驗(yàn)。
• 組件化開發(fā)：React采用組件化開發(fā)，使得代碼更加模塊化、可復(fù)用，提高開發(fā)效率。
• 代碼可維護(hù)性高：React采用單向數(shù)據(jù)流，使得代碼的數(shù)據(jù)流動(dòng)清晰可見，方便維護(hù)和調(diào)試。
• 社區(qū)活躍：React擁有龐大的社區(qū)和生態(tài)圈，能夠提供豐富的插件和組件，方便開發(fā)。

1.4 React的缺點(diǎn)- React的缺點(diǎn)：

• 學(xué)習(xí)曲線較陡峭，需要一定的JavaScript基礎(chǔ)和了解JSX語法；
• 只關(guān)注視圖層，不涉及其他方面，需要與其他庫或框架配合使用；
• 代碼復(fù)雜度較高，需要編寫大量的組件和邏輯代碼；
• 不支持IE8及以下版本的瀏覽器，需要使用polyfill進(jìn)行兼容。

2. React基礎(chǔ)知識

2.1 JSX語法

- JSX語法實(shí)例：

const element = <h1>Hello, world!</h1>; // JSX語法
ReactDOM.render(element, document.getElementById('root')); // 渲染到頁面

- JSX表達(dá)式實(shí)例：

function formatName(user) {
 return user.firstName + ' ' + user.lastName;
}

const user = {
 firstName: 'Tony',
 lastName: 'Stark'
};

const element = (
 <h1>
   Hello, {formatName(user)}!
 </h1>
);

ReactDOM.render(element, document.getElementById('root')); // 渲染到頁面

- JSX屬性實(shí)例：

const element = <div tabIndex="0">Hello, world!</div>; // JSX屬性
ReactDOM.render(element, document.getElementById('root')); // 渲染到頁面

2.2 組件

- 2.2 組件

• 示例一：Hello World 組件

  import React from 'react';
  
  function HelloWorld() {
    return <h1>Hello, World!</h1>;
  }
  
  export default HelloWorld;
  

• 示例二：計(jì)數(shù)器組件

  import React, { useState } from 'react';
  
  function Counter() {
   const [count, setCount] = useState(0);
  
   return (
     <div>
       <p>Count: {count}</p>
       <button onClick={() => setCount(count + 1)}>Increment</button>
       <button onClick={() => setCount(count - 1)}>Decrement</button>
     </div>
   );
  }
  
  export default Counter;
  

• 示例三：表格組件

  import React from 'react';
  
  function Table(props) {
   const { data } = props;
  
   return (
     <table>
       <thead>
         <tr>
           <th>Name</th>
           <th>Age</th>
           <th>Gender</th>
         </tr>
       </thead>
       <tbody>
         {data.map((item) => (
           <tr key={item.id}>
             <td>{item.name}</td>
             <td>{item.age}</td>
             <td>{item.gender}</td>
           </tr>
         ))}
       </tbody>
     </table>
   );
  }
  
  export default Table;
  

2.2.1 函數(shù)式組件

- 函數(shù)式組件

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

ReactDOM.render(
  <Welcome name="John" />,
  document.getElementById('root')
);

2.2.2 類組件

• 類組件是React中定義組件的一種方式，使用ES6 class語法來聲明組件。
• 類組件必須繼承React.Component類，并實(shí)現(xiàn)render方法來描述組件的UI。
• 類組件可以定義自己的狀態(tài)state，通過setState方法來更新狀態(tài)并重新渲染組件。
• 類組件也可以定義自己的方法，用于處理用戶交互或其他邏輯。
• 類組件可以接收props作為輸入數(shù)據(jù)，通過this.props來訪問。
• 類組件的生命周期包括掛載、更新和卸載三個(gè)階段，可以通過重寫生命周期方法來實(shí)現(xiàn)一些特定的邏輯。

示例：

import React, { Component } from 'react';

class MyComponent extends Component {
 constructor(props) {
   super(props);
   this.state = {
     count: 0
   };
 }

 handleClick = () => {
   this.setState({ count: this.state.count + 1 });
 }

 render() {
   return (
     <div>
       <h1>{this.props.title}</h1>
       <p>Count: {this.state.count}</p>
       <button onClick={this.handleClick}>Click me</button>
     </div>
   );
 }
}

export default MyComponent;

表格示例：

2.3 Props和State

• Props和State的區(qū)別：

- Props的使用：

function ParentComponent() {
 const name = "小明";
 return (
   <ChildComponent name={name} />
 );
}

function ChildComponent(props) {
 return (
   <div>
     <p>我是子組件</p>
     <p>我的名字是：{props.name}</p>
   </div>
 );
}

- State的使用：

class Counter extends React.Component {
 constructor(props) {
   super(props);
   this.state = {
     count: 0
   };
 }

 handleClick = () => {
   this.setState({
     count: this.state.count + 1
   });
 }

 render() {
   return (
     <div>
       <p>當(dāng)前計(jì)數(shù)：{this.state.count}</p>
       <button onClick={this.handleClick}>增加計(jì)數(shù)</button>
     </div>
   );
 }
}

2.4 生命周期

• React組件的生命周期包括：掛載階段、更新階段、卸載階段。
• 掛載階段包括constructor、getDerivedStateFromProps、render、componentDidMount。
• 更新階段包括getDerivedStateFromProps、shouldComponentUpdate、render、getSnapshotBeforeUpdate、componentDidUpdate。
• 卸載階段包括componentWillUnmount。

2.5 事件處理- React中的事件處理與原生DOM事件處理有所不同，它使用了合成事件（SyntheticEvent）來封裝瀏覽器的原生事件，提供了跨瀏覽器的一致性。

• 在React中，事件處理函數(shù)需要綁定到組件實(shí)例上，可以使用箭頭函數(shù)或在構(gòu)造函數(shù)中使用bind方法來綁定。
• 事件處理函數(shù)中的this默認(rèn)指向組件實(shí)例，而不是觸發(fā)事件的DOM元素。
• 事件處理函數(shù)的參數(shù)e是一個(gè)合成事件對象，它包含了與原生事件相同的屬性和方法，如e.target, e.stopPropagation()等。
• React中的事件處理函數(shù)不能返回false來阻止事件冒泡，而需要使用e.stopPropagation()或e.preventDefault()來達(dá)到相同的效果。
• 示例代碼：

 class MyComponent extends React.Component {
   handleClick = (e) => {
     console.log('Button clicked!');
   }
 
   render() {
     return (
       <button onClick={this.handleClick}>Click me</button>
     );
   }
 }

表格語法示例：

3. React進(jìn)階知識

3.1 高階組件

• 高階組件是什么？
  • 高階組件是一個(gè)函數(shù)，它接收一個(gè)組件作為參數(shù)并返回一個(gè)新的組件。
• 高階組件的作用是什么？
  • 高階組件可以幫助我們實(shí)現(xiàn)組件的復(fù)用，邏輯的抽象和封裝，以及在不改變原組件的情況下增強(qiáng)組件的功能等。
• 高階組件的實(shí)現(xiàn)方式有哪些？
  • 屬性代理：通過包裹原組件并向其傳遞新的props來增強(qiáng)組件的功能。
  • 反向繼承：通過繼承原組件并重寫其方法來增強(qiáng)組件的功能。
• 高階組件的應(yīng)用場景有哪些？
  • 條件渲染：根據(jù)條件渲染不同的組件。
  • 認(rèn)證與授權(quán)：根據(jù)用戶的認(rèn)證狀態(tài)和權(quán)限渲染不同的組件。
  • 數(shù)據(jù)獲取與處理：將數(shù)據(jù)獲取和處理的邏輯從組件中抽離出來，使組件更加簡潔和可復(fù)用。
  • 功能增強(qiáng)：增強(qiáng)組件的功能，如添加日志記錄、性能統(tǒng)計(jì)等。
• 高階組件的注意事項(xiàng)有哪些？
  • 高階組件不應(yīng)該修改原組件的props和state。
  • 高階組件應(yīng)該透傳原組件的props和context。
  • 高階組件應(yīng)該遵循函數(shù)式編程的原則，不應(yīng)該有副作用。

3.2 Hooks

• useState

import React, { useState } from 'react';

function Example() {
  // 聲明一個(gè)叫 "count" 的 state 變量
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

• useEffect

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

  function Example() {
    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>
    );
  }

• useContext

  import React, { useContext } from 'react';
  
  const ThemeContext = React.createContext('light');
  
  function App() {
    return (
      <ThemeContext.Provider value="dark">
        <Toolbar />
      </ThemeContext.Provider>
    );
  }
  
  function Toolbar(props) {
    return (
      <div>
        <ThemedButton />
      </div>
    );
  }
  
  function ThemedButton() {
    const theme = useContext(ThemeContext);
    return <button>{theme}</button>;
  }
  

• useReducer

  import React, { 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 };
      default:
        throw new Error();
    }
  }

  function Counter() {
    const [state, dispatch] = useReducer(reducer, initialState);
    return (
      <>
        Count: {state.count}
        <button onClick={() => dispatch({ type: 'increment' })}>+</button>
        <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
      </>
    );
  }

• useCallback

  import React, { useState, useCallback } from 'react';
  
  function Example() {
    const [count, setCount] = useState(0);
    const [text, setText] = useState('');
  
    const handleChange = useCallback(e => {
      setText(e.target.value);
    }, []);
  
    return (
      <div>
        <p>You clicked {count} times</p>
        <button onClick={() => setCount(count + 1)}>
          Click me
        </button>
        <input value={text} onChange={handleChange} />
      </div>
    );
  }
  

• useMemo

  import React, { useState, useMemo } from 'react';

  function Example() {
    const [count, setCount] = useState(0);

    const expensiveCount = useMemo(() => {
      return count ** 2;
    }, [count]);

    return (
      <div>
        <p>You clicked {count} times</p>
        <p>Expensive count: {expensiveCount}</p>
        <button onClick={() => setCount(count + 1)}>
          Click me
        </button>
      </div>
    );
  }

3.2.1 useState

• useState基礎(chǔ)用法：

import React, { useState } from 'react';

function Example() {
  // 聲明一個(gè)叫 "count" 的 state 變量
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

• useState使用函數(shù)更新狀態(tài)：

 import React, { useState } from 'react';

 function Example() {
   const [count, setCount] = useState(0);

   function handleClick() {
     setCount(prevCount => prevCount + 1);
   }

   return (
     <div>
       <p>You clicked {count} times</p>
       <button onClick={handleClick}>
         Click me
       </button>
     </div>
   );
 }

• useState可以接受函數(shù)作為初始值：

  import React, { useState } from 'react';
  
  function Example() {
  const [count, setCount] = useState(() => {
    const initialCount = 0;
    return initialCount;
  });
  
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
  }
  

• useState可以使用解構(gòu)賦值：

  import React, { useState } from 'react';
  
  function Example() {
   const [state, setState] = useState({ count: 0, name: '張三' });
  
   function handleClick() {
     setState(prevState => {
       return { ...prevState, count: prevState.count + 1 };
     });
   }
  
   return (
     <div>
       <p>{state.name} clicked {state.count} times</p>
       <button onClick={handleClick}>
         Click me
       </button>
     </div>
   );
  }
  

3.2.2 useEffect

• useEffect是React中的一個(gè)Hook，用于處理組件中的副作用操作，比如數(shù)據(jù)獲取、DOM操作等。

• useEffect的基本用法如下：

  import React, { useEffect } from 'react';
  
  function Example() {
    useEffect(() => {
      // 在這里處理副作用操作
      return () => {
        // 在組件卸載時(shí)執(zhí)行清除操作
      };
    }, [/* 依賴項(xiàng) */]);
  
    return <div>Example</div>;
  }
  

• useEffect接收兩個(gè)參數(shù)，第一個(gè)參數(shù)是一個(gè)回調(diào)函數(shù)，用于處理副作用操作；第二個(gè)參數(shù)是一個(gè)數(shù)組，用于指定副作用操作的依賴項(xiàng)，只有依賴項(xiàng)發(fā)生變化時(shí)，才會(huì)重新執(zhí)行副作用操作。

• useEffect還可以返回一個(gè)清除函數(shù)，用于在組件卸載時(shí)執(zhí)行清除操作。

3.2.3 useContext

• 使用useContext進(jìn)行組件間通信

 import React, { useContext } from 'react';

 // 創(chuàng)建一個(gè)context
 const MyContext = React.createContext();

 // 在父組件中設(shè)置context的值
 function Parent() {
   return (
     <MyContext.Provider value="hello">
       <Child />
     </MyContext.Provider>
   );
 }

 // 在子組件中使用context的值
 function Child() {
   const value = useContext(MyContext);
   return <div>{value}</div>;
 }

3.3 Redux

• Redux是一種狀態(tài)管理工具，它可以幫助我們更好地管理React中的數(shù)據(jù)流。
• Redux有三個(gè)核心概念：store、action和reducer。
• store是Redux中保存數(shù)據(jù)的地方，我們可以通過store.getState()來獲取store中的數(shù)據(jù)。
• action是Redux中描述事件的對象，它必須包含一個(gè)type屬性，用來描述事件的類型。
• reducer是Redux中處理事件的函數(shù)，它接收當(dāng)前的state和action，返回一個(gè)新的state。
• Redux的使用需要安裝redux和react-redux兩個(gè)包，并且需要在應(yīng)用中創(chuàng)建一個(gè)store。
• 使用Redux時(shí)，我們需要定義action和reducer，并將它們注冊到store中。
• 可以使用redux-devtools來方便地調(diào)試Redux應(yīng)用。
• Redux還可以與React結(jié)合使用，通過react-redux提供的connect函數(shù)將Redux的狀態(tài)映射到React組件的props中。
• 在使用Redux時(shí)，需要注意不要濫用Redux，只有在需要管理大量共享狀態(tài)時(shí)才使用它，否則會(huì)導(dǎo)致代碼變得復(fù)雜難以維護(hù)。

3.4 React Router- React Router是什么？

• React Router是一個(gè)基于React之上的強(qiáng)大路由庫，它可以讓你向應(yīng)用中加入路由功能，以便用戶可以通過URL訪問不同的頁面。
• React Router的使用方法
  • 安裝React Router：npm install react-router-dom
  • 在應(yīng)用中引入React Router：import { BrowserRouter as Router, Route, Link } from "react-router-dom";
  • 使用<Router>組件包裹整個(gè)應(yīng)用，使用<Route>組件定義路由規(guī)則，使用<Link>組件生成鏈接。
• React Router的常用API
  • <Route>組件：定義路由規(guī)則，包含path和component兩個(gè)屬性。
  • <Link>組件：生成鏈接，包含to屬性。
  • useHistory Hook：獲取路由歷史記錄，可以用來實(shí)現(xiàn)頁面跳轉(zhuǎn)。
• React Router的高級用法
  • 嵌套路由：在一個(gè)路由規(guī)則中嵌套另一個(gè)路由規(guī)則。
  • 動(dòng)態(tài)路由：使用參數(shù)來定義路由規(guī)則，例如/users/:id。
  • 路由守衛(wèi)：在路由跳轉(zhuǎn)前進(jìn)行權(quán)限驗(yàn)證或其他操作。可以使用<Route>組件的render屬性或者自定義組件來實(shí)現(xiàn)。

4. React實(shí)戰(zhàn)

4.1 創(chuàng)建React應(yīng)用

• 使用create-react-app創(chuàng)建React應(yīng)用
• 在應(yīng)用中添加組件并渲染
• 使用props傳遞數(shù)據(jù)給組件
• 使用state管理組件內(nèi)部狀態(tài)
• 處理組件事件
• 使用生命周期方法控制組件行為
• 使用React Router實(shí)現(xiàn)頁面路由
• 使用Redux管理應(yīng)用狀態(tài)
• 使用React Hooks優(yōu)化組件代碼
• 使用React測試工具進(jìn)行單元測試
• 使用React Native開發(fā)移動(dòng)應(yīng)用
• 使用Next.js實(shí)現(xiàn)服務(wù)器渲染
• 使用React與其他技術(shù)棧進(jìn)行集成，如GraphQL、TypeScript等
• 使用React開發(fā)實(shí)際項(xiàng)目的經(jīng)驗(yàn)分享
• 總結(jié)與展望

表格語法：

4.2 React與其他框架集成

• React與Vue.js集成

  示例代碼：

  // 在Vue.js組件中使用React組件
  <template>
    <div>
      <my-react-component :prop1="value1" @event1="handleEvent"></my-react-component>
    </div>
  </template>
  
  <script>
    import MyReactComponent from './MyReactComponent';
  
    export default {
      components: {
        'my-react-component': MyReactComponent
      },
      data() {
        return {
          value1: 'some value'
        }
      },
      methods: {
        handleEvent() {
          // 處理React組件觸發(fā)的事件
        }
      }
    }
  </script>
  

• React與Angular集成

  示例代碼：

  // 在Angular組件中使用React組件
  import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
  import * as React from 'react';
  import * as ReactDOM from 'react-dom';
  import { MyReactComponent } from './MyReactComponent';
  
  @Component({
    selector: 'app-my-angular-component',
    template: '<div #reactContainer></div>',
  })
  export class MyAngularComponent implements OnInit {
    @ViewChild('reactContainer', { static: true }) reactContainer: ElementRef;
  
    @Input() prop1: string;
  
    ngOnInit() {
      ReactDOM.render(<MyReactComponent prop1={this.prop1} />, this.reactContainer.nativeElement);
    }
  }
  

• React與jQuery集成

  示例代碼：

  // 在jQuery插件中使用React組件
  (function($) {
    $.fn.myJqueryPlugin = function(options) {
      const settings = $.extend({}, options);
  
      return this.each(function() {
        const $this = $(this);
        const props = { prop1: settings.prop1 };
  
        ReactDOM.render(<MyReactComponent {...props} />, $this[0]);
      });
    };
  })(jQuery);
  

4.3 React性能優(yōu)化

4.4 React測試- 使用Jest和Enzyme進(jìn)行組件測試

• 使用React Testing Library進(jìn)行組件測試
• 使用Cypress進(jìn)行端到端測試
• 使用Sinon進(jìn)行單元測試
• 使用Mocha和Chai進(jìn)行集成測試
• 使用Jasmine進(jìn)行全棧測試
• 表格：

5. 參考資料

5.1 React官方文檔

• React官方文檔：https://reactjs.org/docs/getting-started.html

  React官方文檔是React框架的官方文檔，提供了詳細(xì)的React介紹、快速上手指南、組件API等內(nèi)容，是學(xué)習(xí)React的必備資料。在這里，你可以了解到React的基本概念、核心特性、組件生命周期、事件處理等知識點(diǎn)，并且可以通過實(shí)例代碼進(jìn)行實(shí)踐操作，加深對React的理解。同時(shí)，React官方文檔也提供了React Native、React VR等相關(guān)技術(shù)的文檔，方便開發(fā)者進(jìn)行深入學(xué)習(xí)和應(yīng)用。

5.2 React源碼解析

• React源碼解析官方文檔：https://reactjs.org/docs/codebase-overview.html
• React源碼解析系列博客：https://react.iamkasong.com/
• React源碼解析視頻教程：https://www.bilibili.com/video/BV1qE411b7cZ
• React源碼解析Github倉庫：https://github.com/facebook/react
• 表格：React源碼解析書籍推薦

5.3 React實(shí)戰(zhàn)教程- React官方文檔：https://reactjs.org/docs/getting-started.html文章來源地址http://www.zghlxwxcb.cn/news/detail-659356.html

• React中文文檔：https://zh-hans.reactjs.org/
• 5.3 React實(shí)戰(zhàn)教程：
  • React小書：http://huziketang.mangojuice.top/books/react/
  • React Native官方文檔：https://reactnative.dev/docs/getting-started
  • React Router官方文檔：https://reactrouter.com/web/guides/quick-start
  • Ant Design官方文檔：https://ant.design/docs/react/introduce-cn
  • Material-UI官方文檔：https://material-ui.com/zh/getting-started/installation/
  • Redux官方文檔：https://redux.js.org/introduction/getting-started
  • Mobx官方文檔：https://mobx.js.org/README.html
  • TypeScript官方文檔：https://www.tslang.cn/docs/home.html
  • Next.js官方文檔：https://nextjs.org/docs/getting-started
  • Gatsby官方文檔：https://www.gatsbyjs.com/docs/

到了這里，關(guān)于前端 react教程（詳細(xì)版）的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！