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 的一個實際示例顯示…… 閱讀更多

大多數情況下，我們需要從元件返回多個元素。React Fragment 有助於返回多個元素。另一種方法是使用 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 context api 在 16.3 或更高版本中可以安全地用於生產環境。新增 context api 的原因是如果存在一系列子元件，則避免傳遞 props。如果不使用 context api，我們必須透過所有中間元件傳遞 props。另一種替代解決方案是使用 Redux 等第三方庫來維護一箇中央儲存。理解傳遞 props 的問題App.js → 書籍的 props → BookList.js → 再次將書籍作為 props 傳遞 → Book.js隨著子元件數量的增加，鏈…… 閱讀更多

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

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

React hook useEffect 有助於在 React 的功能元件中新增 componentDidUpdate 和 componentDidMount 組合生命週期。到目前為止，我們知道我們只能在有狀態元件中新增生命週期方法。要使用它，我們需要從 react 匯入它-import 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 中，我們可以…… 閱讀更多