欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用react的7個(gè)避坑案例小結(jié)

 更新時(shí)間：2021年05月17日 09:29:52   作者：Jimmy  
React是個(gè)很受歡迎的前端框架。今天我們探索下React開發(fā)者應(yīng)該注意的七點(diǎn)，感興趣的小伙伴們可以參考一下

React是個(gè)很受歡迎的前端框架。今天我們探索下React開發(fā)者應(yīng)該注意的七個(gè)點(diǎn)。

1. 組件臃腫

React開發(fā)者沒有創(chuàng)建必要的足夠多的組件化，其實(shí)這個(gè)問題不局限于React開發(fā)者，很多Vue開發(fā)者也是。

當(dāng)然，我們現(xiàn)在討論的是React

在React中，我們可以創(chuàng)建一個(gè)很多內(nèi)容的組件，來執(zhí)行我們的各種任務(wù)，但是最好是保證組件精簡(jiǎn) -- 一個(gè)組件關(guān)聯(lián)一個(gè)函數(shù)。這樣不僅節(jié)約你的時(shí)間，而且能幫你很好地定位問題。
比如下面的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)應(yīng)該是不變的。如果你直接修改state，會(huì)導(dǎo)致難以修改的性能問題。
比如下面例子：

const modifyPetsList = (element, id) => {
  petsList[id].checked = element.target.checked;
  setPetsList(petList)
}

上面例子中，你想更改數(shù)組對(duì)象中checked鍵。但是你遇到一個(gè)問題：因?yàn)槭褂孟嗤囊酶牧藢?duì)象，React無法觀察并觸發(fā)重新渲染。

解決這個(gè)問題，我們應(yīng)該使用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ù)字類型的值卻傳了字符串，反之亦然

這是個(gè)很小的錯(cuò)誤，不應(yīng)該出現(xiàn)。
比如下面的例子：

class Arrival extends React.Component {
  render() {
    return (
      <h1>
        Hi! You arrived {this.props.position === 1 ? "first!" : "last!"} .
      </h1>
    );
  }
}

這里===對(duì)字符串'1'是無效的。而解決這個(gè)問題，需要我們?cè)趥鬟fprops值的時(shí)候用{}包裹。
修正如下：

// ❌
const element = <Arrival position='1' />;

// ✅
const element = <Arrival position={1} />;

4. list組件中沒使用key

假設(shè)我們需要渲染下面的列表項(xiàng)：

const lists = ['cat', 'dog', 'fish'];

render() {
  return (
    <ul>
      {lists.map(listNo =>
        <li>{listNo}</li>)}
    </ul>
  );
}

當(dāng)然，上面的代碼可以運(yùn)行。當(dāng)列表比較龐雜并需要進(jìn)行更改等操作的時(shí)候，就會(huì)帶來渲染的問題。

React跟蹤文檔對(duì)象模型（DOM）上的所有列表元素。沒有記錄可以告知React，列表發(fā)生了什么改動(dòng)。

解決這個(gè)問題，你需要添加keys在你的列表元素中。keys賦予每個(gè)元素唯一標(biāo)識(shí)，這有助于React確定已添加，刪除，修改了哪些項(xiàng)目。
如下：

<ul>
  {lists.map(listNo =>
    <li key={listNo}>{listNo}</li>)}
</ul>

5. setState是異步操作

很容易忘記React中的state是異步操作的。如果你在設(shè)置一個(gè)值之后就去訪問它，那么你可能不能立馬獲取到該值。
我們看看下面的例子：

handlePetsUpdate = (petCount) => {
  this.setState({ petCount });
  this.props.callback(this.state.petCount); // Old value
};

你可以使用setState()的第二個(gè)參數(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很有用，但是沒必要使用它來管理每個(gè)狀態(tài)。
如果我們的應(yīng)用程序沒有需要交換信息的并行級(jí)組件的時(shí)候，那么就不需要在項(xiàng)目中添加額外的庫。比如我們想更改組件中的表單按鈕狀態(tài)的時(shí)候，我們更多的是優(yōu)先考慮state方法或者useState鉤子。

7. 組件沒以大寫字母開頭命名

在JSX中，以小寫開頭的組件會(huì)向下編譯為HTML元素。

所以我們應(yīng)該避免下面的寫法：

class demoComponentName extends React.Component {
}

這將導(dǎo)致一個(gè)錯(cuò)誤：如果你想渲染React組件，則需要以大寫字母開頭。
那么得采取下面這種寫法：

class DemoComponentName extends React.Component {
}

后話

上面的內(nèi)容提取自Top 10 mistakes to avoid when using React，采用了意譯的方式，提取了7條比較實(shí)用的內(nèi)容。

到此這篇關(guān)于使用react的7個(gè)避坑案例小結(jié)的文章就介紹到這了,更多相關(guān)react 坑內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論