React コンポーネント: クラスと機能。
My React journey began four years ago with functional components and Hooks. Then came 'Siswe, a fellow participant in the bootcamp and our resident class component enthusiast. While the rest of us were collaborating on team projects with functional components, 'Siswe clung to class components with an unwavering loyalty.
Components are the building blocks of your user interface (UI).
Think of them as Lego bricks – you can combine them in various ways to create complex structures. They are independent and reusable pieces of code that encapsulate UI and logic.
Reusing a component within another component typically looks like this:
import MyComponent from './MyComponent'; function ParentComponent() { return ( <div> <MyComponent /> </div> ); }
Class Components and Functional Components are the two primary ways to create components in React.
import React, { Component } from 'react'; class Counter extends Component { constructor(props) { super(props); this.state = { count: 0 }; } handleClick = () => { this.setState({ count: this.state.count + 1 }); }; render() { return ( <div> <p>You clicked {this.state.count} times</p> <button onClick={this.handleClick}>Click me</button> </div> ); } } export default Counter;
This is a class component, created using JavaScript classes that extend the React.Component class.
import React, { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); const handleClick = () => { setCount(count + 1); }; return ( <div> <p>You clicked {count} times</p> <button onClick={handleClick}>Click me</button> </div> ); } export default Counter;
This on the other hand is a functional component, written as a simple JavaScript function.
State Management: The Core Difference.
Class components manage their own internal state using this.state. This is typically initialized in the constructor, accessed using this.state object, and updated using the this.setState method, as seen in the code block above.
Functional components were initially stateless. But with the introduction of Hooks, they gained the ability to manage state and lifecycle logic. Utilizing the useState hook for managing state, it returns a pair of values: the current state and a function to update it, as seen above. This is sufficient for simple state management. For more complex state logic involving multiple sub-values, or when the next state depends on the previous one, you want to use useReducer.
For example:
import React, { useReducer } from 'react'; const initialState = { count: 0, step: 1, }; const reducer = (state, action) => { switch (action.type) { case 'increment': return { ...state, count: state.count + state.step }; case 'decrement': return { ...state, count: state.count - state.step }; case 'setStep': return { ...state, step: action.payload }; default: throw new Error(); } }; function Counter() { const [state, dispatch] = useReducer(reducer, initialState); const increment = () => dispatch({ type: 'increment' }); const decrement = () => dispatch({ type: 'decrement' }); const setStep = (newStep) => dispatch({ type: 'setStep', payload: newStep }); return ( <div> <p>Count: {state.count}</p> <p>Step: {state.step}</p> <button onClick={increment}>+</button> <button onClick={decrement}>-</button> <input type="number" value={state.step} onChange={(e) => setStep(Number(e.target.value))} /> </div> ); } export default Counter;
Here, useReducer is managing multiple state values and complex update logic in a structured and maintainable way. Hooks are exclusively for functional components.
Avoid direct manipulation of the state object in both components.
Never directly modify or mutate the state object, regardless of the component type. Instead, create a new object with the updated values. This approach helps React efficiently track changes and optimize re-renders.
Functional component example:
import React, { useState } from 'react'; function UserProfile() { const [user, setUser] = useState({ name: 'Jane Doe', age: 30 }); const handleNameChange = (newName) => { setUser({ ...user, name: newName }); // Create a new object with updated name }; return ( <div> <p>Name: {user.name}</p> <p>Age: {user.age}</p> <input type="text" value={user.name} onChange={(e) => handleNameChange(e.target.value)} /> </div> ); } export default UserProfile;
Class component example:
import React, { Component } from 'react'; class UserProfile extends Component { state = { user: { name: 'Jane Doe', age: 30 } }; handleNameChange = (newName) => { this.setState(prevState => ({ user: { ...prevState.user, name: newName } // Create a new object with updated name })); }; render() { return ( <div> <p>Name: {this.state.user.name}</p> <p>Age: {this.state.user.age}</p> <input type="text" value={this.state.user.name} onChange={(e) => this.handleNameChange(e.target.value)} /> </div> ); } } export default UserProfile;
In both examples, we're updating the name property of the user object while preserving the original object's integrity. This ensures that a new state object is created, preserving immutability and preventing potential issues with state updates. Adherence to this ensures predictable behavior, performance optimizations, and easier debugging.
클래스 구성 요소는 복잡한 논리를 위한 것입니다.
- 복잡한 상태 관리: 세밀한 제어가 필요한 복잡한 상태 로직을 처리할 때 this.state 및 this.setState가 있는 클래스 구성 요소는 더 많은 유연성을 제공할 수 있습니다.
- 수명 주기 메서드: componentDidMount, componentDidUpdate 또는 componentWillUnmount와 같은 수명 주기 메서드에 크게 의존하는 구성 요소의 경우 클래스 구성 요소가 전통적인 선택입니다.
- 오류 경계: 구성 요소 트리 내의 오류를 처리하고 충돌을 방지하려면 componentDidCatch가 있는 클래스 구성 요소가 필수적입니다.
- 성능 최적화: 성능이 중요한 특정 시나리오에서는 클래스 구성 요소 내의 PureComponent 또는 shouldComponentUpdate를 활용할 수 있습니다.
- 레거시 코드베이스: 클래스 구성 요소에 크게 의존하는 기존 프로젝트에서 작업하는 경우 새 구성 요소에 클래스 구성 요소를 사용하면 일관성을 유지하는 것이 더 쉬울 수 있습니다.
기능적 구성 요소는 간단한 보기용입니다.
- 간단한 구성 요소: 최소한의 상태나 논리를 갖춘 표현형 구성 요소의 경우 단순성과 가독성으로 인해 기능적 구성 요소가 선호되는 경우가 많습니다.
- 후크를 사용한 상태 관리: 기능적 구성요소에서 useState 및 useReducer를 활용하면 상태를 관리하는 강력하고 유연한 방법이 제공됩니다.
- 부작용: useEffect 후크를 사용하면 데이터 가져오기, 구독 또는 수동 DOM(문서 개체 모델) 조작과 같은 부작용을 관리할 수 있습니다.
- 성능 최적화: useMemo 및 useCallback을 사용하여 기능 구성 요소의 성능을 최적화할 수 있습니다.
구성 요소의 요구 사항에 따라 결정을 내리세요.
기능적 접근 방식은 일반적으로 더 간결하고 읽기 쉬운 것으로 간주되며 단순성과 효율성으로 인해 충분한 경우가 많습니다. 그러나 클래스 구성 요소는 특히 복잡한 논리 또는 성능 최적화를 처리할 때 상태 관리 및 수명 주기 메서드에 대한 더 많은 제어 기능을 제공합니다. 이는 복잡한 논리를 구성하기 위한 더 나은 구조를 의미합니다.
엄격한 규칙이 없기 때문에 클래스 구성 요소와 기능 구성 요소 사이의 선택이 항상 명확한 것은 아닙니다. 구성 요소의 요구 사항을 평가하고 프로젝트 요구 사항에 가장 잘 맞는 유형을 선택하세요.
어떤 구성 요소를 더 즐겁게 작업하시나요?
以上がReact コンポーネント: クラスと機能。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











フロントエンドのサーマルペーパーチケット印刷のためのよくある質問とソリューションフロントエンド開発におけるチケット印刷は、一般的な要件です。しかし、多くの開発者が実装しています...

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1)イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2)動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3)非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

スキルや業界のニーズに応じて、PythonおよびJavaScript開発者には絶対的な給与はありません。 1. Pythonは、データサイエンスと機械学習でさらに支払われる場合があります。 2。JavaScriptは、フロントエンドとフルスタックの開発に大きな需要があり、その給与もかなりです。 3。影響要因には、経験、地理的位置、会社の規模、特定のスキルが含まれます。

この記事の視差スクロールと要素のアニメーション効果の実現に関する議論では、Shiseidoの公式ウェブサイト(https://www.shisido.co.co.jp/sb/wonderland/)と同様の達成方法について説明します。

JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。

JavaScriptを学ぶことは難しくありませんが、挑戦的です。 1)変数、データ型、関数などの基本概念を理解します。2)非同期プログラミングをマスターし、イベントループを通じて実装します。 3)DOM操作を使用し、非同期リクエストを処理することを約束します。 4)一般的な間違いを避け、デバッグテクニックを使用します。 5)パフォーマンスを最適化し、ベストプラクティスに従ってください。

同じIDを持つ配列要素をJavaScriptの1つのオブジェクトにマージする方法は?データを処理するとき、私たちはしばしば同じIDを持つ必要性に遭遇します...

Zustand非同期操作のデータの更新問題。 Zustand State Management Libraryを使用する場合、非同期操作を不当にするデータ更新の問題に遭遇することがよくあります。 �...
