React训练
郭旭升 Lv6
  2023-03-15 18:43:41 2023-03-15 18:43   2023-04-06 13:13:44    

资源

学习React的教学网站和入门项目：

React官方文档：https://reactjs.org/docs/getting-started.html

React入门教程：https://zh-hans.reactjs.org/tutorial/tutorial.html

React Native中文网：https://reactnative.cn/

React入门项目：https://github.com/facebook/create-react-app

React入门项目：https://github.com/bradtraversy/react_crash_todo

React入门项目：https://github.com/iamshaunjp/react-redux-complete-playlist

目标路径

  1. 核心模块、概念（输入)
  2. 跟着文档做一个示例项目，学习项目组织架构（输入)
  3. 自己动手项目开发（输出)
  4. 文档总结（输出)

核心模块、概念（输入）：在学习任何技术之前，了解核心模块和概念是非常重要的。对于React来说，掌握JSX、组件、状态、属性等概念以及React的核心模块（如react、react-dom）是必须的。

跟着文档做一个示例项目，学习项目组织架构（输入）：跟着官方文档或其他教程做一个示例项目可以帮助你更好地理解React的工作原理和项目组织架构。这有助于建立起对React开发的整体认识。

自己动手项目开发（输出）：通过自己动手实现一个项目，你可以更深入地理解React的使用和应用。这也是一个很好的练习机会，能够更加熟练地运用React进行开发。

文档总结（输出）：在学习过程中，总结文档和笔记是非常重要的。这有助于回顾所学内容，并在以后的开发中查找相关信息。同时，分享学习笔记也可以帮助其他人学习React。

  1. 深入学习 React 的基础概念和 API。进一步深入 React 的内部机制和生命周期等概念，并熟练掌握 React 提供的各种 API。

  2. 学习 React 的生态系统。了解 React 常用的框架和工具，例如 React-Router, Redux, React Native 等等，以及它们的使用和最佳实践。

  3. 实践开发更多的项目。通过自己实际的项目，掌握 React 应用和组件的开发，并学习如何与其他技术（如后端API、Websockets等）集成使用。

  4. 学习 React 的性能优化。React 应用的性能优化是提高 React 技能的重要方面，建议学习 Virtual DOM 工作原理、shouldComponentUpdate 方法、keys 这些知识点。

  5. 掌握 Redux 的使用。Redux 是另一种流行的状态管理库，它在React应用中被广泛的应用于数据状态的管理。建议学习Redux的使用，并结合React来深入了解它的内部机制。

  6. 参与 React 社区。在React社区中交流、学习，参与到开发、维护React相关的项目中去，将能更好的了解到React技术栈的前沿发展动向和应用场景。

tic-tac-toe 项目

技术点

React中包含的技术点： 组件、条件渲染、渲染列表、事件处理、hooks

列表渲染

For each item in a list, you should pass a string or a number that uniquely identifies that item among its siblings. Usually, a key should be coming from your data, such as a database ID. React uses your keys to know what happened if you later insert, delete, or reorder the items.

1
2
3
4
5
6
7
8
9
const listItems = products.map(product =>
  <li key={product.id}>
    {product.title}
  </li>
);

return (
  <ul>{listItems}</ul>
);

更新数据

If you render the same component multiple times, each will get its own state. Click each button separately:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import { useState } from 'react';

export default function MyApp() {
  return (
    <div>
      <h1>Counters that update separately</h1>
      <MyButton />
      <MyButton />
    </div>
  );
}

function MyButton() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <button onClick={handleClick}>
      Clicked {count} times
    </button>
  );
}

Notice how each button “remembers” its own count state and doesn’t affect other buttons.

组件中的状态属于实例自己，不相互影响。

Hooks

Functions starting with use are called Hooks. useState is a built-in Hook provided by React. You can find other built-in Hooks in the API reference. You can also write your own Hooks by combining the existing ones.

Hooks are more restrictive than other functions. You can only call Hooks at the top of your components (or other Hooks). If you want to use useState in a condition or a loop, extract a new component and put it there.

组件间传值

“lifting state up”. By moving state up, you’ve shared it between components.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import { useState } from 'react';

export default function MyApp() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <h1>Counters that update together</h1>
      <MyButton count={count} onClick={handleClick} />
      <MyButton count={count} onClick={handleClick} />
    </div>
  );
}
//The information you pass down like this is called props. Now the MyApp component contains the count state and the handleClick event handler, and passes both of them down as props to each of the buttons.
function MyButton({ count, onClick }) {
  return (
    <button onClick={onClick}>
      Clicked {count} times
    </button>
  );
}

应用软技能中的学习方法

  1. 基础的研究： react到底干什么的，用到什么地方
    就是通过组件来构建用户界面的JS库。
    JSX是React支持的语法形式，可以结合HTML和JS。

  2. 我学习React为了写前端界面，我觉得使用JSX来写界面挺方便的，很有趣。 两个目标，一个是让我熟练的构建自己想要的页面， 另外一个就是找相关工作。

  3. Define success

  • 对于我自己的项目就是想做什么就能做出来，这就是成功。
  • 对于找工作，可能需要考虑性能优化的问题，熟悉技术背后的原理，如组件生命周期。
  1. Find Resources
  • 官网
  • MDN
  • Freecodecamp
  1. Create a learning plan
    （前一段时间总想这一天两天要把一个技术学完，现在看来完全不同，主要还是目的，要学会用，可能一两个小时就能上手了； 为了面试做准备需要花几天时间来研究；想要做出有深度的项目，就需要深度的理解原理和应用技巧，也需要至少几天的时间。没有计划就容易迷路，即便是做了很多事情也会迷茫。）

第一想要的是为了找工作而去做一个项目，要有一定的深度来体现我对技术的理解和应用能力，所以对这个技术要有一定的认知广度和深度，原理和应用。 

寻找一些相关的简历，看看别人做的啥，掌握到什么程度了。
相关面试题要能解答。
最后复刻/自己做一个项目。

怎么做呢， 现在基本可以自己上手做项目了，下一步就是深入的学习，面向面试题学习，看看面试考啥，针对这些点深入学一下。
（React -> Router -> Redux）
6. Filter resources

  • GitHub 找面经
  • 牛客面经
  • 找相关简历

  1. Learning enough to get started

目前什么水平

3月多左右开始学习React，官网的项目过了两三遍，自己做了一些修改。学习路由，还没有学习Redux。 对于应用方面的认知还不足，因为技术栈都是用来做啥的都没有了解完全。（React 全家桶有啥，React工程师技术栈一般包含啥，这些技术一般怎么用）

对于React认知

资源：https://juejin.cn/post/7083155703816257544#heading-10
React 用于前端组件设计，但是状态管理不方便，于是有了Redux
Redux也不方便，有了Redux-saga react-redux， dva

react 组件库， antd

NPM 很多库都是从NPM下载来的

我的优势

对于我会后端， Java、Node（Express, KOA(即将要学)）、数据库，分布式原理有了解，但中间件没咋用过。

  • Post title：React训练
  • Post author：郭旭升
  • Create time：2023-03-15 18:43:41
  • Post link：2023/03/15/React训练/
  • Copyright Notice：All articles in this blog are licensed under BY-NC-SA unless stating additionally.
 Comments
  1. 1. 资源
  2. 2. 目标路径
  3. 3. tic-tac-toe 项目
  4. 4. 技术点
  5. 5. 列表渲染
  6. 6. 更新数据
  7. 7. Hooks
  8. 8. 组件间传值
  9. 9. 应用软技能中的学习方法
  10. 10. 目前什么水平
  11. 11. 对于React认知
  12. 12. 我的优势