React

我在處理一個Next.js/React應用程式時遇到了這個相當困惑的錯誤訊息： TypeError: resolver is not a function 結果解決方法非常簡單。 我正在進行一些編輯，並且將我正在編輯的API呼叫的預設匯出的組件註釋掉了： export default <name> 所以，請確保你有一個預設匯出，錯誤就會消失。

如何在React中將從父組件獲得的所有props傳遞給子組件 假設您有一個組件層次結構，在其中您從頂級組件將props傳遞給下一級組件，並且您需要將這些props原封不動地傳遞給子組件。這種情況經常發生，您真的不想這樣做： const IntermediateComponent = (props) => { return ( <ChildComponent prop1={props.prop1} prop2={props.prop2} /> ) } 相反，您想要傳遞所有的props，無論其名稱如何。 您可以使用展開運算符來實現： const IntermediateComponent = (props) => { return ( <ChildComponent {...props} /> ) } 這種語法更容易閱讀，更少出錯，並且具有靈活性，因為在更改props時您無需更改中介組件中的props名稱或添加props。

在React中，組件通常被分為兩大類：展示型組件和容器型組件。 每個組件都具有其獨特的特性。 展示型組件主要關注生成要輸出的標記。 它們不管理任何類型的狀態，除非與展示相關的狀態。 容器型組件主要關注“後端”操作。 它們可能處理各種子組件的狀態。 它們可能包裝幾個展示型組件。 它們可能與Redux進行交互。 為了簡化區分，我們可以說展示型組件關注外觀，容器型組件關注使事情運作。 例如，這是一個展示型組件。它從其props中獲取數據，並僅關注顯示元素： const Users = props => ( <ul> {props.users.map(user => ( <li>{user}</li> ))} </ul> ) 另一方面，這是一個容器型組件。它管理並存儲自己的數據，並使用展示型組件來顯示它： class UsersContainer extends React.Component { constructor() { this.state = { users: [] } } componentDidMount() { axios.get('/users').then(users => this.setState({ users: users })) ) } render() { return <Users users={this.state.users} /> } }

通過告訴 React 在點擊某個元素時顯示另一個組件，來切換組件的可見性。 在許多場景中，當點擊按鈕或鏈接時，您希望在屏幕內顯示完全不同的組件。 以導航結構為例，該如何實現呢？ 在這個例子中，我們將狀態集中管理在 App 組件中。 import React, { useState } from 'react'; const AddTripButton = (props) => { return <button onClick={props.addTrip}>Add a trip</button>; }; export default AddTripButton; 然後，在 App 組件中，通過將 addTrip 事件指定為 triggerAddTripState 方法來處理添加旅行的事件： <AddTripButton addTrip={this.triggerAddTripState} /> 使用 React hooks，首先導入 useState： import React, { useState } from 'react'; 然後聲明一個 “state” 變量： const [state, setState] = useState('start'); 在 JSX 中，根據此狀態值顯示和隱藏不同的組件： function App() { const [state, setState] = useState('start'); return ( <div> {state === 'start' && <AddTripButton addTrip={() => setState('add-trip')} />} {state === 'add-trip' && <AnotherComponent />} </div> ); }

我需要在 React 中，讓側邊欄在大螢幕上呈現一種樣式，而在較小螢幕上呈現另一種樣式，所以我希望能夠在 JSX 中偵測到響應式佈局的變化。 就像這樣： 您可以使用 react-responsive 套件來實現這一點。 npm install react-responsive 然後您可以引入 useMediaQuery 鉤子： import { useMediaQuery } from 'react-responsive' 在您的組件中，您可以像這樣使用它： const isBigScreen = useMediaQuery({ query: '(min-device-width: 1224px)' }) const isSmallScreen = useMediaQuery({ query: '(max-width: 1224px)' }) 這是我在組件主頁上找到的一個簡單的斷點示例，對於我的需求來說效果很好。 我在一個佈局組件中以以下方式使用它： import { useMediaQuery } from 'react-responsive' export default function Layout({ children }) { const isBigScreen = useMediaQuery({ query: '(min-device-width: 1224px)' }) const isSmallScreen = useMediaQuery({ query: '(max-width: 1224px)' }) return ( <div> {isSmallScreen ?...

React視圖庫介紹 什麼是React？ React是一個旨在簡化視覺界面開發的JavaScript庫。 它是在Facebook開發並於2013年釋出的，是一些最廣泛使用的應用程序的引擎，為Facebook和Instagram等眾多應用程序提供動力。 它的主要目標是通過將UI分成一系列組件，使得在任何時間點都可以輕松理解界面及其狀態。 React為什麼如此受歡迎？ React在前端Web開發領域引起了轟動。為什麼？ 比其他替代方案更簡單 在React宣布時，Ember.js和Angular 1.x是主要的框架選擇。這兩個框架對代碼施加了許多約定，因此不方便移植現有應用程序。React選擇非常容易集成到現有項目中，因為這是Facebook在將其引入現有代碼庫時所必須做的。此外，這兩個框架提供了太多內容，而React只選擇實現了View層而不是完整的MVC堆棧。 完美的時機 當時，Google宣布了Angular 2.x，隨之而來的是不向後兼容的重大更改。從Angular 1轉到Angular 2就像轉到不同的框架，因此這個因素，再加上React承諾的執行速度改進，使得開發人員渴望嘗試它。 得到Facebook的支持 如果React成為成功的項目，得到Facebook的支持顯然是一個好處。 Facebook目前對React非常感興趣，認為它的開源價值，對於所有在自己項目中使用React的開發人員來說，這是一個巨大的加分點。 React學習起來簡單嗎？ 雖然我說React比替代框架更簡單，但深入研究React仍然很複雜，主要是因為可以與React集成的相關技術，如Redux和GraphQL。 React本身具有非常小的API，你只需要理解4個概念就可以入門： 組件 JSX 狀態 屬性

什麼是不變性？它在React世界中扮演怎樣的角色？ 在React編程中，你可能會遇到的一個概念就是不變性（和其反面，可變性）。 不管你對不變性的概念有什麼看法，React及其大部分生態系統基本上都強制了這一點，所以你至少需要了解為什麼它如此重要以及它的影響。 在編程中，當變量的值在創建後無法更改時，該變量就是不可變的。 當你操作字符串時，你可能已經在不知不覺中使用了不可變變量。字符串在默認情況下是不可變的，當你改變它們時，實際上是創建了一個新的字符串並將其賦值給同一個變量名。 不可變變量永遠無法更改。要更新其值，你需要創建一個新的變量。 對於對象和數組也是同樣的道理。 要添加新項目，你可以創建一個新的數組，通過連接舊數組和新項目。 在更改對象之前，需要先將其複製。 這個原則在React中有很多應用。 例如，你不應該直接變異組件的state屬性，而是應該通過setState()方法來變更。 在Redux中，你不應該直接變異狀態，而是通過reducer函數來變更。 那麼，為什麼要這樣做呢？ 其原因有很多，其中最重要的是： 變異可以集中管理，例如在Redux中，這樣可以提高調試能力並減少錯誤源。 代碼看起來更整潔，更容易理解。你不會預期一個函數在沒有你知曉的情況下改變某個值，這給你帶來了可預測性。當函數不變異對象而只返回一個新對象時，稱為純函數。 函數庫可以對代碼進行優化，例如，JavaScript在將一個舊的對象引用替換為一個全新的對象時，比直接修改現有對象更快。這提升了性能。

什麼是組合，為什麼它是React應用中的關鍵概念？ 在程式設計中，組合允許您通過結合小而專注的函數來構建更複雜的功能。 例如，想象使用map()從初始數組創建新的數組，然後使用filter()過濾結果： const list = ['Apple', 'Orange', 'Egg'] list.map(item => item[0]).filter(item => item === 'A') //'A' 在React中，組合使您能夠享受一些很棒的優勢。 您可以創建小而精簡的組件，並使用它們來組合更多的功能。該怎麼做呢？ 創建組件的專用版本 使用外部組件來擴展和專門化一個更通用的組件： const Button = props => { return <button>{props.text}</button> } const SubmitButton = () => { return <Button text="Submit" /> } const LoginButton = () => { return <Button text="Login" /> } 將方法作為props傳遞 組件可以專注於跟蹤點擊事件，例如，當點擊事件發生時，實際發生的事情由容器組件決定： const Button = props => { return <button onClick={props.onClickHandler}>{props.text}</button> } const LoginButton = props => { return <Button text="Login" onClickHandler={props....

當你讀到React是一種聲明性的方法來構建用戶界面時，這是什麼意思？ 你會遇到一些文章描述React是一種聲明性的方法來構建用戶界面。 React以其聲明性方法讓它在前端世界中變得非常流行且顯著。 這並不是一個新的概念，但React在構建用戶界面方面比HTML模板更具聲明性： 你可以構建Web界面，而無需直接操作DOM 你可以擁有一個事件系統，而無需與實際的DOM事件交互。 聲明性的相對概念是命令式。命令式的一個常見例子是使用jQuery或DOM事件在DOM中查找元素。你告訴瀏覽器要做什麼，而不是告訴它你需要什麼。 React的聲明性方法抽象了這一點。我們只告訴React我們要以特定方式渲染一個組件，我們永遠不需要與DOM交互以後引用它。

了解React生命周期事件及如何使用它們。 React類組件可以綁定幾個生命周期事件。 鉤子（Hooks）也允許函數組件以不同的方式訪問它們。 在組件的生命周期中，有一系列的事件被調用，你可以在每個事件上添加自定義功能。 在哪個生命周期事件上添加哪個鉤子是我們接下來要研究的內容。 首先，React組件的生命周期有3個階段： 加載 更新 卸載 讓我們詳細看一下這3個階段以及每個階段調用的方法。 加載 在加載時，在組件被加載到DOM之前，有4個生命周期方法：constructor、getDerivedStateFromProps、render和componentDidMount。 constructor constructor是組件加載時第一個呼叫的方法。 通常你使用constructor來設置初始狀態，使用this.state = ...。 getDerivedStateFromProps() 當狀態依賴於屬性時，可以使用getDerivedStateFromProps根據屬性值更新狀態。 它在React 16.3中添加，旨在代替被棄用的componentWillReceiveProps方法。 在這個方法中，你沒有訪問this，因為它是一個靜態方法。 它是一個純方法，所以它不應該引起副作用，並且在使用相同輸入多次呼叫時應該返回相同的輸出。 返回帶有更新後的狀態元素的對象（如果狀態未更改則為null） render() 從render()方法中，你返回構建該組件界面的JSX。 它是一個純方法，所以它不應該引起副作用，並且在使用相同輸入多次呼叫時應該返回相同的輸出。 componentDidMount() 這個方法是用於執行API調用或在DOM上進行操作的地方。 更新 當更新時，在組件被加載到DOM之前，有5個生命周期方法：getDerivedStateFromProps、shouldComponentUpdate、render、getSnapshotBeforeUpdate和componentDidUpdate。 getDerivedStateFromProps() 參見上述描述。 shouldComponentUpdate() 此方法返回一個布林值，true或false。你使用這個方法告訴React是否應該繼續重新渲染，默認為true。在重新渲染的成本較高且你希望更控制何時發生重新渲染時，你會返回false。 render() 參見上述描述。 getSnapshotBeforeUpdate() 在這個方法中，你可以訪問上一次渲染和當前渲染的props和state。 它的使用案例非常特殊，可能是你使用最少的一個。 componentDidUpdate() 此方法在組件在DOM中更新後呼叫。使用它來運行任何第三方DOM API或在DOM更改時必須更新的API。 它對應於加載階段的componentDidMount()方法。 卸載 在此階段，我們只有一個方法，componentWillUnmount。 componentWillUnmount() 當組件從DOM中被刪除時，調用此方法。使用它來執行任何所需的清理工作。 舊版 如果你正在開發一個使用了componentWillMount、componentWillReceiveProps或componentWillUpdate的應用程序，這些方法在React 16.3中已被棄用，你應該遷移到其他生命周期方法。