通过这 12 个技巧快速掌握 React！
如果你正在学习 React，你可能会被它庞大的内容量弄得眼花缭乱。组件、类、属性、状态、Hooks、reducers……简直数不胜数！以下是我总结的 12 条帮助我集中精力学习 React 的实用技巧。
先说明一下，我绝不是说你必须遵循这些建议，这只是对我有效的方法。最终，关键在于找到适合自己的方法。好了，废话不多说，我们开始吧！
1）学习适量的 JavaScript 和 ES6 知识
直接上手框架很容易，但凡事都要循序渐进，对吧？我猜你肯定听腻了这句话！你可能也听腻了“学习框架之前必须先掌握 JavaScript！”。虽然这条建议没错，但它引出了另一个常常被忽略的问题：“学习 React 之前我需要掌握多少 JavaScript 知识？”
三年前我自学 React 时，对 JavaScript 还远称不上专家。但我确实掌握了一些重要的知识，这些知识在你学习 React（或者任何库/框架）之前也应该掌握。
- 函数（包括 ES6 箭头函数）
- 变量（const 和 let）
- 数据类型
- 对象和数组（以及如何使用它们）
- 导入/导出模块
- 使用 API
- 了解 DOM 操作的工作原理
如果你对这些技术的工作原理有基本的了解，你就能很好地掌握 React。使用 React 会让你成为更优秀的 JavaScript 开发人员，因为你仍然是在编写 JavaScript 代码——毕竟 React 本身就是一个 JavaScript 库！
2) 使用 create-react-app
使用 creating-create-app（更多信息请访问 GitHub）是一个很好的入门方式。它提供了一个开箱即用的示例项目，因此您无需担心从头开始搭建！
这意味着至少现在你可以暂时忽略 Babel、webpack 以及其他那些花哨的术语。等你熟练掌握 React 之后，再深入研究这些主题。
3）忘掉 Redux、Context API 和其他花哨的状态管理工具吧。
说到热门词汇，你可能听说过 Redux，它是 React 的一个状态管理框架。虽然 Redux 非常强大，在大型应用中也很有用，但你不需要在 React 入门时学习 Redux！React 本身就具备状态管理功能，这些功能更容易理解，足以满足你的入门需求。
4）关注功能组件
如果你想在组件中存储状态，传统上你需要使用 ES6 类组件。类组件有点笨拙（需要考虑绑定“this”、处理构造函数、难以存储/更新复杂状态等等）：
// function component
const App = (props) => {
return <h2>Hello my name is {props.name}.</h2>;
};
// class based component
class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return <h2>Hello my name is {this.props.name}.</h2>;
}
}
函数组件和 Hook正逐渐成为创建 React 组件的“更友好”方式。函数组件本质上就是返回 JSX 的普通 JavaScript 函数。结合“useState”Hook，创建和使用组件的体验将大大提升。
我不是说“别学类组件！”，如果你想学，当然可以！这绝对是有用的知识。不过现在 Hooks 越来越流行，所以也别忽视它们！
5）选择一种组件样式设置方式
React 中有好几种方法来设置组件样式（谁能想到呢？），我上次统计的时候至少有 8 种。太疯狂了。
总之，别让自己被各种组件样式设置方法搞得晕头转向。刚开始的时候，普通的 CSS 和样式表就足够用了。更何况，我最近合作过的大多数公司都用纯 CSS，所以即使是 React，这也是一种相当标准的做法。
6) 学习 useState Hook
我之前提到过 useState hook，那么它是什么呢？
useState hook 允许我们在函数式组件中存储状态（以前我们需要使用类组件来实现这一点）。它看起来像这样：
const [name, setName] = useState('Chris');
这会存储一个名为name`in state` 的变量。我们可以使用 `change` 函数更改该变量setName()，并通过向useState函数传递一个值（在本例中为“Chris”）来初始化它。
useState hook 让管理复杂状态变得更加轻松（每个组件可以有“多个状态 hook”），而且我们不必每次想要操作状态时都使用“this”：
const App = (props) => {
const [name, setName] = useState('Chris');
const [age, setAge] = useState(28);
return (
<h2>
Hello my name is {name}. and I am {age} years old
</h2>
);
};
7) 学习 useEffect 钩子
useEffect hook 是一个 React hook，它允许我们在组件生命周期的不同阶段运行代码。
useEffect hook 通常用于执行 API 调用、在 props 更改时更新组件以及运行任何清理代码。
使用useEffect和useState hooks可以很好地解决很多问题，所以一定要把它们纳入你的 React 知识库中！
8) 从一个组件开始
React 的核心在于组件，但这并不意味着我们需要为项目中的每个小功能都创建组件！建议先从一个组件开始，当这个组件变得过于庞大时，再将其拆分成更小的组件。避免“过度抽象”能让你的代码在早期阶段更容易理解，也能避免props 传递不畅——props 传递不畅指的是 props 在多个组件之间传递，这会变得难以管理。
9）道具与州
了解 props、 state以及何时使用它们至关重要。它们是 React 的基石，你会经常用到它们。概括来说：
props 是从父组件传递给子组件的数据。这些数据可以是任何类型的数据——数字、字符串、对象、数组、函数等等。
以下示例展示了如何从App组件（即父组件）向UserDetails组件传递姓名和年龄：
const App = () => {
return <UserDetails name='chris' age={25} />;
};
状态是能够表示应用程序中可更改部分的数据。例如，用户列表、指示模态框是否打开的布尔标志以及输入字段值都可以存储在状态中：
const App = () => {
const [isModalOpen, setIsModalOpen] = useState(false);
const [inputValue, setInputValue] = useState("hello React");
const [userList, setUserList] =useState([
{name: "chris", age: 28},
{name: "jenny", age: 20},
{name: "alfred", age: 32}
])
return(
// ...JSX
)
}
10）忽略服务器——使用虚假数据或现有API
如果你想学习 React，通常最好专注于 React 本身。这很合理，对吧？练习从 API 获取数据时，你可能会忍不住想：“糟糕，我得为此构建一个 API！看来我得学习 Node.js 了！”
如果你的目标是成为一名全栈开发者，这倒是个不错的想法。但如果你只是想学习 React，那就尝试使用现有的 API 或模拟数据来练习使用 API。这有助于你专注于 React 本身（我坚信一次只学习一件事！）。
11）远离其他框架
这是我经常看到初学者（包括我自己）犯的错误。框架很多，不知为何，我们总觉得必须全部学会！但其实不必。我还没见过哪个招聘启事上写着“必须有 React、Vue 和 Angular 经验”——如果真有，我肯定会避而远之。
如果你正在学习 React，那就专注于 React。你当然可以随时尝试其他框架，甚至可能会想：“嘿，我更喜欢 Vue！”，然后把注意力转移到 Vue 上。无论你最终选择哪个框架，都要尽量专注于它，直到你至少能够构建几个项目为止。
12）了解组件的生命周期以及组件如何重新渲染
了解 React 生命周期以及组件何时/如何重新渲染至关重要。我曾经因为不完全理解这些内容而浪费了大量时间修复 bug！以下是一些入门技巧：
- 当组件状态改变时，React 会重新渲染该组件。
- 当组件重新渲染时，它会自动重新渲染其子组件。
- 使用 useEffect() 在生命周期的特定部分运行代码
玩得开心！
最后，尽情享受学习的过程吧！我们之所以成为开发者，是因为我们热爱创造，所以一定要享受你的 React 学习之旅！
接下来呢？开展一些项目吧！
何不尝试构建一些 React 项目来进一步提升你的学习效果呢？我每隔几周（大概）就会发送一些项目创意，包括项目思路、初始代码和一些技巧。订阅即可直接在你的邮箱中收到！
文章来源：https://dev.to/chrisblakely01/fast-track-your-react-learning-with-these-12-tips-gnn