Things I Wish I Knew When I Started with React

原创

ithorizon 4周前 (10-18) 阅读数 26 #Javascript

3 年 react 开发的经验教训

当我第一次投入 react 时，感觉就像打开了潘多拉魔盒。有很多东西要学，一路上，我遇到了很多“啊哈！”的情况。时刻。以下是我希望在开始时就知道的 10 件事，以帮助您在 react 之旅中跳过一些减速带。

1. 组件只是函数

最重要的认识是什么？ react 组件只是 javascript 函数。你将 props 作为参数传递，它们返回 jsx，它看起来像 html，但事实并非如此。一旦您以这种方式思考组件，理解 props 和 state 等概念就会变得更加简单。

const mycomponent = (props) =&gt; {
  return <h1>{props.title}</h1>;
};

2. state 和 props 不同

这现在看起来可能很基础，但在早期，props 和 state 之间的区别对我来说并不明显。这是一个快速回顾：

props 是外部的且不可变的（传递给组件的数据）。
状态是内部的且可变的（在组件内管理）。

如有疑问：如果数据来自父级，那么它就是 props。如果数据存在于组件内部，那么它就是状态。

3. hooks 正在改变游戏规则

当 react 引入 hooks 时，它改变了游戏规则。您现在可以使用 usestate 和 useeffect 等挂钩轻松管理状态和副作用，而不是杂耍生命周期方法。我希望我从一开始就知道这些钩子可以让我的代码变得多么强大和简单。

const [count, setcount] = usestate(0);
useeffect(() =&gt; {
  document.title = `you clicked ${count} times`;
}, [count]);

4. 了解虚拟 dom

直到后来我才完全理解 react 的 virtual dom 是如何工作的，这是一个错误。 react 的效率来自于更新虚拟 dom，而不是直接更新真实 dom。通过比较更改，react 仅更新必要的内容，从而使您的应用程序更快。

5. 组件组合优于继承

react 支持组件组合（将组件嵌套在彼此内部）而不是基于类的继承。如果您需要跨组件重用逻辑，最好将其提取到可重用组件或自定义挂钩中，而不是使用继承。

const greeting = ({name}) =&gt; <h1>hello, {name}!</h1>;
const page = () =&gt; <greeting name="john"></greeting>;

6. 管理状态是一门艺术

随着应用程序的增长，状态管理变得很棘手。本地组件状态适用于较小的应用程序，但对于较大的应用程序，context api 等工具或 redux 等库可帮助管理整个应用程序的状态。我开始使用 redux 太早了，但我现在知道在引入更重的工具之前何时应该依靠 usecontext 或 usereducer 等更简单的解决方案。

const mycontext = react.createcontext();
const app = () =&gt; {
  return (
    <mycontext.provider value="{/*" some><componenta></componenta></mycontext.provider>
  );
};

7. typescript 值得付出努力

如果您正在开发更大的代码库，那么采用 typescript 值得学习。它可以通过强制类型来尽早防止错误，并且可以使与其他开发人员的协作更加顺畅。一开始我对 typescript 很挣扎，但一旦我接受了它，我的 react 代码就变得更加健壮。

interface props {
  title: string;
}
const mycomponent: react.fc<props> = ({ title }) =&gt; {
  return <h1>{title}</h1>;
};
</props>

8. 用于范围样式的 css-in-js

刚开始时，我一直在与相互冲突的全球风格作斗争。 css-in-js 库（例如 styled-components 或 emotion）通过允许作用域样式与组件逻辑共存，改变了我的游戏规则。

import styled from 'styled-components';

const button = styled.button`
  background: blue;
  color: white;
  padding: 10px;
`;

const app = () =&gt; <button>click me</button>;

9. 测试比你想象的容易

测试 react 组件是令人生畏的，但像 react 测试库和 jest 这样的工具可以让这一切变得简单。为重要组件编写测试以确保它们按预期运行，稍后您会感谢自己。

import { render } from '@testing-library/react';
import mycomponent from './mycomponent';

test('renders the title', () =&gt; {
  const { getbytext } = render(<mycomponent title="hello"></mycomponent>);
  expect(getbytext(/hello/i)).tobeinthedocument();
});

10. 优化很重要

随着应用程序的扩展，您需要对其性能进行优化。记忆化 (react.memo)、延迟加载组件 (react.lazy) 和拆分代码 (react.suspense) 等技术可以极大地改善用户体验。性能对我来说并不是最重要的，但对你来说应该是最重要的！

const LazyComponent = React.lazy(() =&gt; import('./LazyComponent'));

const App = () =&gt; (
  <react.suspense fallback="{&lt;div">Loading...}&gt;
    <lazycomponent></lazycomponent></react.suspense>
);