小白快速上手的react.js教程

阿新 • • 發佈：2021-10-05

小白快速上手的react.js教程

學習一下技術總結大概一下主要組成部分

1、元件通訊

2、元件生命週期

3、路由

3、資料的狀態管理等

4、webpack等打包工具

進階

腳手架，語言一系列原理

本文還是從官網挑選的常用API，例子也是官網的，詳細可以移步官網

點選學習 https://zh-hans.reactjs.org/docs/getting-started.html

預備系列：

安裝腳手架，啟動專案

一、狀態提升

二、Context

Context 提供了一個無需為每層元件手動新增 props，就能在元件樹間進行資料傳遞的方法。

在一個典型的 React 應用中，資料是通過 props 屬性自上而下（由父及子）進行傳遞的，但此種用法對於某些型別的屬性而言是極其繁瑣的（例如：地區偏好，UI 主題），這些屬性是應用程式中許多元件都需要的。Context 提供了一種在元件之間共享此類值的方式，而不必顯式地通過元件樹的逐層傳遞 props。

看一下具體的例子

一般傳props傳引數

import React from 'react';
// import React, {Component} from 'react';
// import ReactDOM from 'react-dom';
import './App.css';


class App extends React.Component{
    render() {
        return <Toolbar  theme="dark" />;
    }
}

function Toolbar(props){
     console.log('toolbar--', props)
     
// Toolbar 元件接受一個額外的“theme”屬性，然後傳遞給 ThemedButton 元件。
    // 如果應用中每一個單獨的按鈕都需要知道 theme 的值，這會是件很麻煩的事，
    // 因為必須將這個值層層傳遞所有元件。
    return (
        <div>
            <ThemeButton theme={props.theme} />;
        </div>
    )

}

class ThemeButton extends React.Component{

    render (){
        console.log( 
'ThemeButton', this.props)
        return <button theme={this.props.theme}> theme 測試</button>
    }
} 

export default App;

import React from 'react';
// import React, {Component} from 'react';
// import ReactDOM from 'react-dom';
import './App.css';
const ThemeContext = React.createContext('light')

class App extends React.Component{
    render() {
        return (
            <ThemeContext.Provider value="dark">
                <Toolbar  />;
            </ThemeContext.Provider>
        )
    }
}

// 中間的元件再也不必指明往下傳遞 theme 了。
function Toolbar(props){
     console.log('ThemeContext--toolbar--', props)
    // Toolbar 元件接受一個額外的“theme”屬性，然後傳遞給 ThemedButton 元件。
    // 如果應用中每一個單獨的按鈕都需要知道 theme 的值，這會是件很麻煩的事，
    // 因為必須將這個值層層傳遞所有元件。
    return (
        <div>
            <ThemeButton  />;
        </div>
    )

}

class ThemeButton extends React.Component{
    // 指定 contextType 讀取當前的 theme context。
  // React 會往上找到最近的 theme Provider，然後使用它的值。
  // 在這個例子中，當前的 theme 值為 “dark”。
   static contextType = ThemeContext;  // 沒有賦值的話 this.context的值會是{}
    render (){
        console.log(ThemeButton.contextType, '**ThemeContext--ThemeButton**', this.context ) // 列印一下這裡的值
        return <button theme={this.context}> theme 測試</button>
    }
} 

export default App;

上面的程式碼把這行註釋

// static contextType = ThemeContext;  // 沒有賦值的話 this.context的值會是{}

class ThemeButton extends React.Component{
    // 指定 contextType 讀取當前的 theme context。
  // React 會往上找到最近的 theme Provider，然後使用它的值。
  // 在這個例子中，當前的 theme 值為 “dark”。
//    static contextType = ThemeContext;
    render (){
        console.log('**ThemeContext--ThemeButton**', this.context )
        return <button theme={this.context}> theme 測試</button>
    }
}

列印

關於static知識補充：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Classes/static

為了程式碼更好管理現在把程式碼拆分方便管理

目錄檔案

context.js

import React from 'react';
// 公用提取，方便其他檔案引入
export const ThemeContext = React.createContext('light')

App.js

import React from 'react';
import './App.css';
import { ThemeContext } from './context'
import Toolbar from './components/demo2/Toolbar';

class App extends React.Component{
   render() {
        return (
            <ThemeContext.Provider value="dark">
                <Toolbar  />;
            </ThemeContext.Provider>
        )
    }
}

export default App;

ThemeButton.js

/**
 * context study demo
 * context 通過中級件Toolbar.js
 */
import React from 'react';
import { ThemeContext } from '../../context'

class ThemeButton extends React.Component{
  // 指定 contextType 讀取當前的 theme context。
  // React 會往上找到最近的 theme Provider，然後使用它的值。
  // 在這個例子中，當前的 theme 值為 “dark”。
   static contextType = ThemeContext;
    render (){
        console.log('##ThemeContext--ThemeButton##', this.context )
        return <button theme={this.context}> 通過context傳值theme</button>
    }
} 

export default ThemeButton

Toolbar.js

/**
 * context study demo
 * @param {*} props 
 * @returns 
 */

import ThemeButton from './ThemeButton'
// 中間的元件再也不必指明往下傳遞 theme 了。
function Toolbar(props){
    console.log('ThemeContext--toolbar--', props)
   // Toolbar 元件接受一個額外的“theme”屬性，然後傳遞給 ThemedButton 元件。
   // 如果應用中每一個單獨的按鈕都需要知道 theme 的值，這會是件很麻煩的事，
   // 因為必須將這個值層層傳遞所有元件。
   return (
       <div>
           <ThemeButton  />;
       </div>
   )

}

export default Toolbar;