React.js - 2
48157 ワード
userEffectを使用して、マウント/アンロード/更新時に実行するアクションを設定します。
-最初のパラメータには関数が含まれ、2番目のパラメータには依存値の配列(deps)が含まれます.
マウント/アンマウント
マウント:最初の出現時
-propsとして受信した値を構成部品のローカル状態に設定
-外部APIリクエスト
-ライブラリの使用
-setIntervalを使用して重複タスクをスケジュールするか、setTimeoutを使用してタスクをスケジュールします.
アンインストール:消失時
-setInterval、setTimeoutを使用して登録されたタスクを消去します.
-ライブラリインスタンスを削除
cleanup関数:userEffectが返す関数.depsが空の場合、構成部品が消えたときに呼び出されます.
更新:一部のアイテムが変更された場合
特定の値をdepsに挿入
-構成部品を最初に取り付けたときに呼び出され、指定した値が変更されたときに呼び出されます.アンインストール時に呼び出すことも、値が変更される前に呼び出すこともできます.
depsパラメータの省略
-構成部品を再レンダリングするたびに呼び出されます.(親構成部品が再レンダリングされると、子構成部品も再レンダリングされます.)
変更されたUserList.jsコード
import React, { useEffect } from 'react';
function User({ user, onRemove, onToggle }) {
useEffect(() => {
console.log(user);
});
return (
<div>
<b
style={{
cursor: 'pointer',
color: user.active ? 'green' : 'black'
}}
onClick={() => onToggle(user.id)}
>
{user.username}
</b>
<span>({user.email})</span>
<button onClick={() => onRemove(user.id)}>삭제</button>
</div>
);
}
function UserList({ users, onRemove, onToggle }) {
return (
<div>
{users.map(user => (
<User
user={user}
key={user.id}
onRemove={onRemove}
onToggle={onToggle}
/>
))}
</div>
);
}
export default UserList;useMemoを使用して計算値を再使用する
-以前に計算された値を再使用することで、不要な呼び出しを削減し、リソースの浪費を削減します.
-最初のパラメータに演算方法を定義する関数を追加し、2番目のパラメータにdpes配列を追加します.
useCallbackを使用して関数を再使用する
-新しい関数を作成せずに再使用したい場合に使用します.
-関数でステータスまたはpropsを使用する場合は、(deps)配列に含める必要があります.propsが受け取った関数があれば、(deps)にも入れるべきです.
変更されたアプリケーション.jsコード
import React, { useRef, useState, useMemo, useCallback } from 'react';
import UserList from './UserList';
import CreateUser from './CreateUser';
function countActiveUsers(users) {
console.log('활성 사용자 수를 세는중...');
return users.filter(user => user.active).length;
}
function App() {
const [inputs, setInputs] = useState({
username: '',
email: ''
});
const { username, email } = inputs;
const onChange = useCallback(
e => {
const { name, value } = e.target;
setInputs({
...inputs,
[name]: value
});
},
[inputs]
);
const [users, setUsers] = useState([
{
id: 1,
username: 'velopert',
email: '[email protected]',
active: true
},
{
id: 2,
username: 'tester',
email: '[email protected]',
active: false
},
{
id: 3,
username: 'liz',
email: '[email protected]',
active: false
}
]);
const nextId = useRef(4);
const onCreate = useCallback(() => {
const user = {
id: nextId.current,
username,
email
};
setUsers(users.concat(user));
setInputs({
username: '',
email: ''
});
nextId.current += 1;
}, [users, username, email]);
const onRemove = useCallback(
id => {
setUsers(users.filter(user => user.id !== id));
},
[users]
);
const onToggle = useCallback(
id => {
setUsers(
users.map(user =>
user.id === id ? { ...user, active: !user.active } : user
)
);
},
[users]
);
const count = useMemo(() => countActiveUsers(users), [users]);
return (
<>
<CreateUser
username={username}
email={email}
onChange={onChange}
onCreate={onCreate}
/>
<UserList users={users} onRemove={onRemove} onToggle={onToggle} />
<div>활성사용자 수 : {count}</div>
</>
);
}
export default App;React.memoを使用してシンボルツリーをレンダリングしない
構成部品のpropsが変更されていない場合は、再レンダリングを防止することで、構成部品の再レンダリング性能を最適化できます.
関数更新
コールバック関数のパラメータから最新値を参照できるため、deps配列にパラメータを入れる必要はありません.
userReducerを使用してステータス更新ロジックを分離
userReducerについて
-構成部品のステータス更新ロジックを構成部品から分離できます.
-reduce:現在のステータスとアクションオブジェクトをパラメータとして取得し、新しいステータスを返します.
function reducer(state, action) {
return nextState;
}-useReducer
const [state, dispatch] = useReducer(reducer, initialState);アプリケーションコンポーネントをユーザーモニタとして実装
import React, { useRef, useReducer, useMemo, useCallback } from 'react';
import UserList from './UserList';
import CreateUser from './CreateUser';
function countActiveUsers(users) {
console.log('활성 사용자 수를 세는중...');
return users.filter(user => user.active).length;
}
const initialState = {
inputs:{
username: '',
email: ''
},
users:[
{
id: 1,
username: 'velopert',
email: '[email protected]',
active: true
},
{
id: 2,
username: 'tester',
email: '[email protected]',
active: false
},
{
id: 3,
username: 'liz',
email: '[email protected]',
active: false
}]
}
function reducer(state, action){
switch(action.type){
case 'CHANGE_INPUT':
return{
...state,
inputs: {
...state.inputs,
[action.name]: action.value
}
};
case 'CREATE_USER':
return{
inputs: initialState.inputs,
users: state.users.concat(action.user)
};
case 'TOGGLE_USER':
return{
...state,
users: state.users.map(user =>
user.id === action.id ? { ...user, active: !user.active } : user
)
};
case 'REMOVE_USER':
return{
...state,
users: state.users.filter(user => user.id !== action.id)
}
default:
return state;
}
}
function App(){
const[state, dispatch] = useReducer(reducer, initialState);
const nextId = useRef(4);
const {users} = state;
const{username, email} = state.inputs;
const onChange = useCallback(e => {
const { name, value } = e.target;
dispatch({
type: 'CHANGE_INPUT',
name,
value
});
}, []);
const onCreate = useCallback(() => {
dispatch({
type: 'CREATE_USER',
user: {
id: nextId.current,
username,
email
}
});
nextId.current += 1;
}, [username, email]);
const onToggle = useCallback(id => {
dispatch({
type: 'TOGGLE_USER',
id
});
}, []);
const onRemove = useCallback(id => {
dispatch({
type: 'REMOVE_USER',
id
});
}, []);
const count = useMemo(() => countActiveUsers(users), [users]);
return(
<>
<CreateUser username = {username} email = {email} onChange = {onChange} onCreate ={onCreate} />
<UserList users={users} onToggle = {onToggle} onRemove = {onRemove} />
<div>활성사용자수: {count} </div>
</>
);
};
export default App;カスタムホームページの作成
-重複論理を簡単に再利用できます.
-Hooksを使用して必要な機能を実装し、コンポーネントが使用したい値を返します.
Custom hooksで作ったuseinputjs
import {useState, useCallback} from 'react';
function useInputs(initialForm){
const[form, setForm] = useState(initialForm);
const onChange = useCallback((e)=>{
const {name, value} = e.target;
setForm(form => ({...form, [name]: value}));
},[]);
const reset = useCallback(()=> setForm(initialForm), [initialForm]);
return [form, onChange, reset];
};
export default useInputs;Context APIを使用したグローバル値の管理
新規コンテキストの作成
-React.createContext()関数の使用
const UserDispatch = React.createContext(null);useState vs useReducer
userReducerを使用すると、Context APIを使用してdispatchをグローバルに有効にし、関数をコンポーネントに渡す必要がある場合、コードの構造がよりきれいになります.
Immerを使用すると、不変性の管理が容易になります。
-ステータスを更新するときは、不変性を考慮せずに更新できます.
import produce from 'immer';-関数式更新を使用すると、コードをより簡単に記述できます.product関数が最初のパラメータをスキップして更新関数を追加すると、戻り値が更新状態の関数になります.
クラス構成部品
-render()メソッド:レンダリングしたいJSXを返します.
-propsを検索するとき、this.propsをクエリーします.
カスタムメソッドの作成
-クラスでメソッドを宣言します.
-ステータスを更新するときにthisを使用します.setStat関数を使用します.
メソッドと構成部品インスタンスの関係が中断されないことを確認します。
-クラスのジェネレータメソッド構築関数でbind操作を実行
-カスタムメソッドを宣言するときに矢印関数構文を使用します.
-onClick新しい関数を作成して渡します
ステータスの宣言
stateを宣言するときは、コンストラクション関数の内部でそうします.state、無条件オブジェクトシェイプを設定します.
setStateの関数式更新
setStateは、ステータスを変更する関数だけでなく、ステータスへの変換を要求する関数として理解されるべきである.
LifeCycle Method
-ブラウザで構成部品を表示、更新、または消去するときに、エラーが発生したときに呼び出されるメソッド.
-クラス構成部品でのみ使用可能です.
マウント
マウント時に発生するライフサイクル
-constructor:構成部品の作成者メソッド.最初に実行
-getDerivedStateFromProps:props、受信したコンテンツをstateに挿入します.前に静的が必要で、thisをクエリーできません.
-render:構成部品をレンダリングする方法
-componentDidMount:構成部品の最初のレンダリング後に呼び出す方法
更新
-getDerivedStateFromProps
-shouldComponentUpdate:構成部品を再レンダリングするかどうかを決定する方法
-render
-getSnapshotBeforeUpdate:構成部品が変化する前のDOM状態を取得し、ある値を返すと、その後に発生する構成部品DidUpdate関数からその状態を取得します.
-ComponentDidUpdate:レンダリングが完了すると、画面に希望するすべての変更が反映され、呼び出されます.
インストールされていません
-componentWillUnmount:コンポーネントが画面から消える前に呼び出されます.
componentDidCatch
-エラー処理(propsなどは渡さない)
-1番目のパラメータのエラーの内容、2番目のパラメータのエラーが発生した場所を通知します.
Reference
この問題について(React.js - 2), 我々は、より多くの情報をここで見つけました https://velog.io/@jgyeyang/React.js-2テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol