使用react的7個避坑案例小結
React是個很受歡迎的前端框架。今天我們探索下React開發(fā)者應該注意的七個點。
1. 組件臃腫
React開發(fā)者沒有創(chuàng)建必要的足夠多的組件化，其實這個問題不局限于React開發(fā)者，很多Vue開發(fā)者也是。
當然，我們現(xiàn)在討論的是React
在React中，我們可以創(chuàng)建一個很多內(nèi)容的組件，來執(zhí)行我們的各種任務，但是最好是保證組件精簡 -- 一個組件關聯(lián)一個函數(shù)。這樣不僅節(jié)約你的時間，而且能幫你很好地定位問題。
比如下面的TodoList組件：
// ./components/TodoList.js
import React from 'react';
import { useTodoList } from '../hooks/useTodoList';
import { useQuery } from '../hooks/useQuery';
import TodoItem from './TodoItem';
import NewTodo from './NewTodo';
const TodoList = () => {
const { getQuery, setQuery } = useQuery();
const todos = useTodoList();
return (
<div>
<ul>
{todos.map(({ id, title, completed }) => (
<TodoItem key={id} id={id} title={title} completed={completed} />
))}
<NewTodo />
</ul>
<div>
Highlight Query for incomplete items:
<input value={getQuery()} onChange={e => setQuery(e.target.value)} />
</div>
</div>
);
};
export default TodoList;
2. 直接更改state
在React中，狀態(tài)應該是不變的。如果你直接修改state，會導致難以修改的性能問題。
比如下面例子：
const modifyPetsList = (element, id) => {
petsList[id].checked = element.target.checked;
setPetsList(petList)
}
上面例子中，你想更改數(shù)組對象中checked鍵。但是你遇到一個問題：因為使用相同的引用更改了對象，React無法觀察并觸發(fā)重新渲染。
解決這個問題，我們應該使用setState()方法或者useState()鉤子。
我們使用useState()方法來重寫之前的例子。
const modifyPetsList = (element, id) => {
const { checked } = element.target;
setpetsList((pets) => {
return pets.map((pet, index) => {
if (id === index) {
pet = { ...pet, checked };
}
return pet;
});
});
};
3. props該傳數(shù)字類型的值卻傳了字符串，反之亦然
這是個很小的錯誤，不應該出現(xiàn)。
比如下面的例子：
class Arrival extends React.Component {
render() {
return (
<h1>
Hi! You arrived {this.props.position === 1 ? "first!" : "last!"} .
</h1>
);
}
}
這里===對字符串'1'是無效的。而解決這個問題，需要我們在傳遞props值的時候用{}包裹。
修正如下：
// ❌
const element = <Arrival position='1' />;
// ✅
const element = <Arrival position={1} />;
4. list組件中沒使用key
假設我們需要渲染下面的列表項：
const lists = ['cat', 'dog', 'fish'];
render() {
return (
<ul>
{lists.map(listNo =>
<li>{listNo}</li>)}
</ul>
);
}
當然，上面的代碼可以運行。當列表比較龐雜并需要進行更改等操作的時候，就會帶來渲染的問題。
React跟蹤文檔對象模型（DOM）上的所有列表元素。沒有記錄可以告知React，列表發(fā)生了什么改動。
解決這個問題，你需要添加keys在你的列表元素中。keys賦予每個元素唯一標識，這有助于React確定已添加，刪除，修改了哪些項目。
如下：
<ul>
{lists.map(listNo =>
<li key={listNo}>{listNo}</li>)}
</ul>
5. setState是異步操作
很容易忘記React中的state是異步操作的。如果你在設置一個值之后就去訪問它，那么你可能不能立馬獲取到該值。
我們看看下面的例子：
handlePetsUpdate = (petCount) => {
this.setState({ petCount });
this.props.callback(this.state.petCount); // Old value
};
你可以使用setState()的第二個參數(shù)，回調(diào)函數(shù)來處理。比如：
handlePetsUpdate = (petCount) => {
this.setState({ petCount }, () => {
this.props.callback(this.state.petCount); // Updated value
});
};
6. 頻繁使用Redux
在大型的React app中，很多開發(fā)者使用Redux來管理全局狀態(tài)。
雖然Redux很有用，但是沒必要使用它來管理每個狀態(tài)。
如果我們的應用程序沒有需要交換信息的并行級組件的時候，那么就不需要在項目中添加額外的庫。比如我們想更改組件中的表單按鈕狀態(tài)的時候，我們更多的是優(yōu)先考慮state方法或者useState鉤子。
7. 組件沒以大寫字母開頭命名
在JSX中，以小寫開頭的組件會向下編譯為HTML元素。
所以我們應該避免下面的寫法：
class demoComponentName extends React.Component {
}
這將導致一個錯誤：如果你想渲染React組件，則需要以大寫字母開頭。
那么得采取下面這種寫法：
class DemoComponentName extends React.Component {
}
后話
上面的內(nèi)容提取自Top 10 mistakes to avoid when using React，采用了意譯的方式，提取了7條比較實用的內(nèi)容。
到此這篇關于使用react的7個避坑案例小結的文章就介紹到這了,更多相關react 坑內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要給大家介紹了關于react如何實現(xiàn)一個密碼強度檢測器的相關資料,使用這個密碼強度器后可以幫助大家提高在線帳號、個人信息的安全性,需要的朋友可以參考下2021-06-06
React?中如何將CSS?visibility?屬性設置為?hidden
這篇文章主要介紹了React中如何將CSS?visibility屬性設置為?hidden,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-05-05
在React中,組件之間的通信是一個非常重要的話題,React提供了幾種方式來實現(xiàn)跨組件通信,下面小編將詳細講講其中幾種通信方式,并提供實際的代碼示例,需要的可以參考下2023-11-11
這篇文章主要為大家詳細介紹了React中常見的三種路由處理方式該如何選擇,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-01-01
關于react-router/react-router-dom v4 history不能訪問問題的解決
這篇文章主要給大家介紹了關于react-router/react-router-dom v4 history不能訪問問題的解決方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧。2018-01-01
ReactNative之鍵盤Keyboard的彈出與消失示例
本篇文章主要介紹了ReactNative之鍵盤Keyboard的彈出與消失示例，具有一定的參考價值，有興趣的可以了解一下2017-07-07
在 react 中,如果我們想控制子組件的顯示和隱藏一般有兩種方式,一種是父組件維護子組件顯示隱藏狀態(tài),另一種則是通過 forwardRef 直接設置子組件的狀態(tài)進行維護,這兩種方式各有優(yōu)缺點,以及對于不同的使用場景不同,今天我們就來簡單討論下,需要的朋友可以參考下2025-04-04
Redux 是一個狀態(tài)管理庫,它可以幫助你管理應用程序中的所有狀態(tài),Redux的核心概念之一是Store,它表示整個應用程序的狀態(tài),這篇文章給大家介紹React中redux的使用,感興趣的朋友一起看看吧2023-12-12
本篇文章主要介紹了詳解React native全局變量的使用(跨組件的通信)，具有一定的參考價值，有興趣的同學可以了解一下2017-09-09
這篇文章主要給大家介紹了關于解決webpack -p壓縮打包react報語法錯誤的方法，文中通過示例代碼介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧。2017-07-07