使用react的7个避坑案例
共 5202字,需浏览 11分钟
·
2021-05-22 01:49
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={getQuery()} onChange={e => setQuery(e.target.value)} />
</div>
</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该传数字类型的值却传了字符串,反之亦然
这是个很小的错误,不应该出现。
比如下面的例子:
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 {
}
原文地址
https://juejin.cn/post/6963032224316784654