ReactJS React 或 ReactJS 最初由 Facebook 開發，它充當 Web 和移動應用程式的檢視層。它與 Node js 環境很好地整合。以下是 React 的主要功能。可擴充套件性 - react 是一個高度適應性和可擴充套件的庫。功能豐富 - 為現有的 javascript 和 typescript 語言提供擴充套件。可重用性 - react 元件是高度可重用的。Vue.js Vue.js 是基於 javascript 的 MVC 框架，非常有助於建立響應式 UI。以下是 Vue.js 的主要功能。可擴充套件性 - Vue.js 是一個高度適應性和可擴充套件的庫。功能豐富 - 為現有的 html 元件提供擴充套件。可重用性 - Vue.js 元件是高度可重用... 閱讀更多

JSX 最終使用 createElement 方法建立 React 元素。示例 Submit 將轉換為 -React.createElement(    FormButton,    {color: 'green', buttonSize: 10},    'Submit’ )自閉合標籤也可以新增。大寫自定義 React 元素自定義 react 元素必須以大寫字元開頭命名，以便 React 區分 html 元素和 react 元素。由於 Jsx 被轉換為 React.createElement，因此 React 庫必須在範圍內。為此，如果 jsx 需要使用，我們必須匯入 React。使用點運算子訪問內部屬性元素的內部屬性... 閱讀更多

高階元件簡稱為 hoc。它是一種模式，接收一個元件並返回一個新的元件，併為其新增附加功能。//hoc 是自定義 JavaScript 函式的名稱const AddOnComponent= hoc(SimpleComponent);我們使用具有狀態和/或道具的元件來構建 UI。類似地，hoc 從提供的元件構建一個新元件。hoc 的用途是在 React 中進行橫切關注點。元件將負責單個任務的單個責任，而 hoc 函式將負責橫切關注點。來自 redux 的 Connect 函式是 hoc 的一個示例。hoc 的一個實際示例Display... 閱讀更多

大多數時候，我們需要從元件中返回多個元素。React 片段有助於返回多個元素。另一種選擇是使用 div 等 html 元素來包裝它們。但是使用額外的 html 節點可能會導致一些語義問題。React.Fragment 的示例render() {    return (                                  ); }簡寫語法為：render() {    return (                                 ... 閱讀更多

將 ref 傳遞給子元件稱為轉發 ref。React 提供了一個 createRef 函式來為元素建立 ref。forwardRef 是一個將 ref 傳遞給子元件的函式。示例// ExampleRef.js const ExampleTextInput = React.forwardRef((props, ref) => (     )); const exampleInputRef = React.createRef(); class NewTextInput extends React.Component {    handleFormSubmit = e => {       e.preventDefault();       console.log(“Entered value: ”+exampleInputRef.current.value);    };    render() {       return (                       this.handleFormSubmit(e)}>                 ... 閱讀更多

React 上下文 api 在 16.3 或更高版本中安全用於生產環境。新增上下文 api 的原因是，如果存在子元件鏈，則避免傳遞 props。在不使用上下文 api 的情況下，我們必須透過所有中間元件傳遞 props。另一種解決方案是使用 Redux 等第三方庫來維護中央儲存。瞭解傳遞 props 問題App.js → books 的 props → BookList.js → 再次傳遞 books 作為 props → Book.js隨著子元件數量的增加，鏈... 閱讀更多

構建工作流程有助於執行以下操作最佳化程式碼使用下一代 JavaScript (ES6)這是單頁/多頁應用程式的標準方法高效的方法使用 NPM 或 Yarn 輕鬆整合依賴項使用像 web-pack 這樣的捆綁器來更輕鬆地模組化程式碼和交付程式碼像 Babel 這樣的預編譯器我們可以使用本地開發伺服器來測試應用程式構建工作流程看起來很複雜，但 React 社群使用單個命令 create-react-app 使其變得簡單。要使用 create-react-app，我們需要在我們的機器上安裝 node js。您可以使用以下命令在終端上檢查 node 是否已安裝-node –version如果尚未安裝，請安裝最新... 閱讀更多

Hooks 允許 React 中的函式元件獲得基於類的元件中可用的功能，使它們更強大。useState 我們將從 react 中匯入。匯入 {useState} from 'react'；這有助於我們為函式元件建立本地狀態變數，並提供更新該變數的方法。類中的狀態是一個物件，但使用 useState，我們可以建立簡單的原始資料型別，如果需要，還可以建立物件。const test=()=>{    const [age, setAge] = useState(25);    return (                年齡：{age}          setAge(age+1)}>增加年齡          ); ... 閱讀更多

React hook useEffect 有助於在 React 的函式元件中新增 componentDidUpdate 和 componentDidMount 組合生命週期。到目前為止，我們知道我們只能在有狀態元件中新增生命週期方法。要使用它，我們需要從 react 中匯入它-匯入 React, {useEffect} from 'react'；const tutorials=(props)=>{    useEffect( ()=>{       console.log('hello')；       setTimeout( ()=>{ alert('hello')； }, 2000)；    })； }如果我們執行它，我們將在每個渲染週期中看到控制檯日誌和警報。在這裡，我們也可以在 useEffect 內部呼叫 http 請求。現在這類似於有狀態元件的 componentDidUpdate 生命週期。我們可以... 閱讀更多

useContext 鉤子允許將資料傳遞給子元素，而無需使用 Redux。useContext 是 React 中的命名匯出，因此我們可以在函式元件中像下面這樣匯入它 - import {useContext} from ‘react’;如果我們只需要將資料傳遞給子元素，它就是 Redux 的一個簡單替代方案。建立一個上下文環境的簡單示例import React, { createContext } from ‘react’; import ReactDOM from ‘react-dom’; const MessageContext = createContext(); myApp=()=>{    return (                                                ); }在子元件 Test 中，我們可以... 閱讀更多