在快速發展的 Web 開發世界中，React 仍然是建立動態和高效能使用者介面的基石。無論您是經驗豐富的開發人員還是剛起步的開發人員，了解 React 的核心概念對於充分發揮其潛力至關重要。在本文中，我們將探討 React 的基本原理，從它的函式庫狀態到 hooks 的強大功能，並為您提供增強 React 技能的清晰基礎。讓我們深入了解一下！ ？
1. React 是框架還是函式庫？
React 是一個 JavaScript 函式庫，而不是一個框架。與提供一套全面的工具並強制執行建置應用程式的特定方式的框架不同，React 專注於一個特定的方面——UI 渲染。這使得 React 高度靈活和流行，因為它遵循 Unix 哲學，做一件事並做好它。
2.虛擬 DOM
DOM 代表文件物件模型，簡單來說代表應用程式的 UI。每次我們更改 UI 時，DOM 都會更新以表示該更改。 DOM 表示為樹狀資料結構。當我們更改 UI 時，DOM 會重新渲染並更新其子項目。 UI 的重新渲染使應用程式變慢。
對於此解決方案，我們使用虛擬 DOM。虛擬 DOM 只是 DOM 的虛擬表示。當應用程式的狀態變更時，虛擬 DOM 而不是真實 DOM 會更新。
虛擬 DOM 每次建立一棵樹，元素都表示為一個節點。如果任何元素發生變化，就會建立一個新的虛擬 DOM 樹。然後將新樹與前一棵樹進行比較或「差異」。
在此圖中，紅色圓圈代表已變更的節點。這些節點代表更改狀態的 UI 元素。然後比較之前的樹和目前改變的樹。更新後的樹然後批量更新到真實的 DOM。這使得 React 作為高效能 JavaScript 庫脫穎而出。
總結：
- 整個虛擬 DOM 都會更新。
- 虛擬 DOM 與更新前的樣子做比較。 React 找出哪些物件發生了變化。
- 更改的對象，並且僅更改的對象，會在真實 DOM 上更新。
- 真實 DOM 的變化會導致螢幕改變。
3. JSX
JSX (JavaScript XML) 可讓您在 React 中編寫類似 HTML 的程式碼。它使用 React.createElement(component, props, …children) 函數將 HTML 標籤轉換為 React 元素。
例如：
JSX 代碼：
<MyText color="red">
Hello, Good Morning!
</MyText>
登入後複製
此範例編譯為：
React.createElement(
MyText,
{ color: 'red' },
'Hello, Good Morning!'
)
登入後複製
注意：使用者定義的元件必須以大寫字母開頭。小寫標籤被視為 HTML 元素。
4. JSX 中的道具
Props 可以在 JSX 中透過多種方式指定：
JavaScript 表達式作為道具：
<SumComponent sum={1 + 2 + 3} />
登入後複製
這裡，props.sum 的值為 6。
字串文字：
<TextComponent text={‘Good Morning!’} />
<TextComponent text=”Good Morning!” />
登入後複製
上面的兩個例子是等效的。
道具預設為「True」
如果我們不傳遞 prop 的值，它預設為 true。
例如
<TextComponent prop/>
<TextComponent prop={true} />
登入後複製
上面的兩個例子是等效的。
5.類別組件
React 中的元件可以定義為類別或函數。以下是定義類別組件的方法：
class Greetings extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
登入後複製
6.組件生命週期
元件具有生命週期方法，您可以重寫這些方法以在特定階段運行程式碼：
掛載：當元件被建立並插入 DOM 時。
- 建構子()
- 渲染()
- componentDidMount()
更新：當 props 或狀態改變時。
- 渲染()
- componentDidUpdate()
卸載：從 DOM 移除元件時。
7.類別屬性
defaultProps 讓您定義 props 的預設值：
class MyText extends React.Component {
// Component code here
}
MyText.defaultProps = {
color: 'gray'
};
登入後複製
如果沒有提供 props.color，則預設為「灰色」。
8.道具類型
我們可以使用 prop-types 來檢查元件傳遞的屬性的類型。當它們不匹配時，它會給出錯誤。
import PropTypes from 'prop-types';
const studentPropTypes = {
studentName: PropTypes.string,
id: PropTypes.number
};
const props = {
studentName: 'Asima',
id: 'hi' // Invalid
};
PropTypes.checkPropTypes(studentPropTypes, props, 'prop', 'MyComponent');
登入後複製
這將警告 id 類型不符。
9.最佳化效能
React 是為了性能而設計的，但你可以進一步優化它：
使用生產版本：
This creates a production build with optimizations.
Minimize Source Code: Be cautious with changes to React's source code.
Code Splitting: Bundle JavaScript code into chunks to load as needed.
10. React Hooks
Hooks are functions that let you use state and other React features in function components. The two most popular hooks are:
useState: Adds state to function components.
function Example() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
);
}
登入後複製
useEffect: Manages side effects in function components.
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You clicked ${count} times`;
});
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
);
}
登入後複製
React has continually evolved to meet the demands of modern web development, and mastering its core concepts is crucial for building efficient, scalable applications. From understanding how React differentiates itself as a library to harnessing the power of hooks for functional components, these fundamentals will set you on the path to React proficiency.
As you continue to explore and implement React in your projects, remember that staying updated with the latest practices and features will keep you ahead in the ever-changing tech landscape. If you found this article valuable, don’t forget to give it a like and share it with fellow developers eager to deepen their React knowledge!
Thank you for reading, and happy coding! ?
以上是React 的基本核心概念的詳細內容。更多資訊請關注PHP中文網其他相關文章！
