您的位置：首页 > 编程学习 > > 正文

react初学难点（使用react的7个避坑案例小结）

更多时间：2022-04-02 02:25:05 类别：编程学习浏览量：1998

react初学难点

使用react的7个避坑案例小结

// ./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 (
    <li>
      <ul>
        {todos.map(({ id, title, completed }) => (
          <TodoItem key={id} id={id} title={title} completed={completed} />
        ))}
        <NewTodo />
      </ul>
      <li>
        Highlight Query for incomplete items:
        <input value={getQuery()} onChange={e => setQuery(e.target.value)} />
      </li>
    </li>
  );
};

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该传数字类型的值却传了字符串，反之亦然

这是个很小的错误，不应该出现。
比如下面的例子：

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，列表发生了什么改动。

解决这个问题，你需要添加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 坑内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网！

标签：react 坑

上一篇：linux本地文件夹双向同步（linux两台服务器实现自动同步文件）

下一篇：mysql多核cpu利用（mysql CPU高负载问题排查）

您可能感兴趣

react初学难点（使用react的7个避坑案例小结）

react初学难点

目录

热门推荐

排行榜