react 技术栈学习，相关知识储备

关注

原创最新推荐文章于 2026-07-10 16:46:00 发布 2.6k 阅读 AI 写同款· GEO 优化 ›

74HC165级联踩坑实录：STM32读取32路开关状态，时序调试与常见问题排查本文详细介绍了74HC165级联在STM32读取32路开关状态时的时序调试与常见问题排查。从硬件设计的PCB布局优化、电源噪声控制，到软件时序的精确调校和数据采集策略，提供了完整的解决方案。通过逻辑分析仪和示波器的高效使用，解决了信号延迟和干扰问题，最终实现了稳定可靠的32路信号读取。阅读详情

node 与 cnpm 安装

安装 node 最新版，点击进入下载页面。建议下载【长期维护版本】，而不是【含实验性的最新发布版】。
安装 cnpm，参考官网：淘宝 NPM 镜像

最直接的方式：npm install -g cnpm --registry=https://registry.npm.taobao.org

编程思想

UI=render(data)，React 组件扮演的是 render 函数的角色，应该是一个没有副作用的纯函数。
函数式编辑（redux 应用得比较透彻）。
组件化，最大复用。
组件的粒度，需要根据实际需求来灵活处理。
- 让一个组件只专注做一件事，如果发现一个组件做的事情太多了，就可以把这个组件拆分成多个组件，让每个组件依然只专注做一件事。
- 是否需要多处执行？
- 组件化之后，代码是否更具可读性？是否能简化代码逻辑，更易于维护？
- 是否将来有可能需要多处使用？
- 是否可以提取到公用模块库？

JSX

JSX 描述 DOM 时，所有属性都采用小驼峰写法。
JSX 中用 {} 来写 JS 语句。
元素内嵌样式使用对象来描述，样式属性名同样使用小驼峰写法，如 backgroundColor 。
样式，html 中的 class，在 JSX 中，要写成 className。
事件绑定通过 on + eventType 小驼峰写法。
事件，采用驼峰命名，js 的 onclick 要写成 onClick， js 的 onchange 要写成 onChange。
列表，需要有一个属性 key，值在列表中唯一。
受控组件（及时更新至 state），非受控组件（用 ref）。
高阶组件。

简单的知识梳理

class，不是真正的类，只是语法糖。
Component class 中的预定义属性：state, props，它们的变化，会触发组件的重新渲染。它们的更新是异步的，是不能直接修改的，state 需要通过 set 方法来修改。
- prop 是组件的对外接口。
- state 代表组件的内部状态。
- 对外用 prop，内部用state。
子组件修改父组件传入的 props 的值，会有副作用，在编码过程中，不允许这个操作。参考《深入浅出React和Redux》，P24-25，【2.2.3 prop 和 state 的对比】章节。
组件的生命周期。类组件才有生命周期方法，函数组件没有生命周期方法。
- 组件名一定要大写开头。非大写开头，不被当作组件。
- 参考《深入浅出React和Redux》，P30-34，【2.3.2 更新过程】章节。
- componentWillReceiveProps(nextProps)
  1. 弄清楚该函数被调用的时机，才能正确的使用它 => 父组件的 render 函数被调用，那么子组件的该函数被调用。
  2. 父组件传入的 props 发生变化，就会先执行这个方法，此方法可以作为 props 传入后，渲染之前 setState 的机会，并且在这个方法中调用的 setState 方法是不会二次渲染的。
  3. 这里说的不会造成第二次的渲染，并不是说这里的 setState 不会生效。在这个方法里调用 setState 会在组件更新完成之后在 render 方法执行之前更新状态，将两次的渲染合并在一起。
  4. 可以在 componentWillReceiveProps 执行 setState，但是如果你想在这个方法里获取 this.state 得到的将会是上一次的状态。
  5. nextProps 并不一定会变化，所以，需要比较 nextProps 和 this.props 来决定是否执行 props 发生变化后的逻辑。
- componentWillMount
  - 在 render 之前调用。
  - 每一个组件 render 之前立即调用。
  - 可以在服务端被调用，也可以在浏览器端被调用。
  - 不建议在该方法内调用 api 来渲染页面。
- componentDidMount
  - 在 render 之后调用
  - 所有的子组件都 render 完之后才会调用。
  - 只能在浏览器端被调用，在服务器端使用 react 的时候不会被调用。
  - 推荐在该方法内调用 api 来获取服务器端数据，从而进行页面渲染工作。