React是個很受歡迎的前端框架。今天我們探索下React開發者應該注意的七個點。

1. 元件臃腫

React開發者沒有建立必要的足夠多的元件化，其實這個問題不侷限於React開發者，很多vue開發者也是。

當然，我們現在討論的是React

在React中，我們可以建立一個很多內容的元件，來執行我們的各種任務，但是最好是保證元件精簡 -- 一個元件關聯一個函式。這樣不僅節約你的時間，而且能幫你很好地定位問題。
比如下面的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={getQuerhttp://www.cppcns.com
 
y()} onChange={e => setQuery(e.target.value)} />
      </div&www.cppcns.comgt;
    </div>
  );
};

export default TodoList;

2. 直接更改state

在React中，狀態應該是不變的。如果你直接修改state，程式設計客棧會導致難以修改的效能問題。
比如下面例子：

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

上面例子中，你想更改陣列物件中checked鍵。但是你遇到一個問題：因為使用相同的引用更改了物件，React無法觀察並觸發重新渲染。

解決這個問題，我們應該使用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該傳數www.cppcns.com字型別的值卻傳了字串，反之亦然

這是個很小的錯誤，不應該出現。
比如下面的例子：

class Arrival extends React.Component {
  render() {
   http://www.cppcns.com 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，列表發生了什麼改動。

解決這個問題，你需要新增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()的第二個引數，回撥函式來處理。比如：

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

6. 頻繁使用Redux

在大型的React app中，很多開發者使用Redux來管理全域性狀態。
雖然Redux很有用，但是沒必要使用它來管理每個狀態。
如果我們的應用程式沒有需要交換資訊的並行級元件的時候，那麼就不需要在專案中新增額外的庫。比如我們想更改元件中的表單按鈕狀態的時候，我們更多的是優先考慮state方法或者useState鉤子。

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

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

所以我們應該避免下面的寫法：

class demoComponentName extends React.Component {
}

這將導致一個錯誤：如果你想渲染React元件，則需要以大寫字母開頭。
那麼得采取下面這種寫法：

class DemoComponentName extends React.Component {
}

後話

上面的內容提取自Top 10 mistakes to avoid when using React，採用了意譯的方式，提取了7條比較實用的內容。

到此這篇關於使用react的7個避坑案例小結的文章就介紹到這了,更多相關react 坑內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！