reactjs 相关记录

入门资源

官网
安装下载
社区讨论
中文资源
依赖和扩展

资源汇总

基本概念

React 特点

1. 声明式设计 −React采用声明范式，可以轻松描述应用。
2. 高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。
3. 灵活 −React可以与已知的库或框架很好地配合。
4. JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
5. 组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
6. 单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定

Hook

1. Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。
2. React 16.8.0 是第一个支持 Hook 的版本。升级时，请注意更新所有的 package，包括 React DOM。
   1. React Native 从 0.59 版本开始支持 Hook。
3. Hook 解决了我们五年来编写和维护成千上万的组件时遇到的各种各样看起来不相关的问题
   1. 在组件之间复用状态逻辑很难
      1. Hook 使你在无需修改组件结构的情况下复用状态逻辑
   2. 复杂组件变得难以理解
      1. 在多数情况下，不可能将组件拆分为更小的粒度，因为状态逻辑无处不在。这也给测试带来了一定挑战。同时，这也是很多人将 React 与状态管理库结合使用的原因之一。但是，这往往会引入了很多抽象概念，需要你在不同的文件之间来回切换，使得复用变得更加困难。为了解决这个问题，Hook 将组件中相互关联的部分拆分成更小的函数（比如设置订阅或请求数据），而并非强制按照生命周期划分。你还可以使用 reducer 来管理组件的内部状态，使其更加可预测。
   3. 难以理解的 class
      1. Hook 使你在非 class 的情况下可以使用更多的 React 特性
4. 关于 Hook 的常见问题
   1. 有什么是 Hook 能做而 class 做不到的？
   2. Hook 会替代 render props 和高阶组件吗？
   3. 我应该使用单个还是多个 state 变量？
   4. 如何从 useCallback 读取一个经常变化的值？
   5. 生命周期方法要如何对应到 Hook？
   6. React 是如何把对 Hook 的调用和组件联系起来的？
   7. Hook 使用了哪些现有技术？

方案权衡

1. React中组件通信的几种方式
   • 父组件向子组件通信
   • 子组件向父组件通信
   • 跨级组件通信
   • 没有嵌套关系组件之间的通信
2. redux、mobx、rxjs这三款数据流管理工具在你项目中是如何取舍的？
3. React有了hooks 还需要redux或mobx么?
4. 你需要Mobx还是Redux？

经验和最佳实践

浅层次经验

1. 浏览器内引用react, 需要使用babel来编译jsx. 注意: 在浏览器中使用 Babel 来编译 JSX 效率是非常低的。
2. create-react-app 工具是react的项目生成器(目前新版已经在使用yarn)
3. 为html元素添加自定义属性,需要使用 data- 前缀 <p data-myattribute = "somevalue"></p>
4. 可以在 JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中 <h1>{1+1}</h1>
5. 在 JSX 中不能使用 if else 语句，但可以使用 conditional (三元运算) 表达式来替代 <h1>{i == 1 ? 'True!' : 'False'}</h1>
6. React 推荐使用内联样式。我们可以使用 camelCase 语法来设置内联样式. React 会在指定元素数字后自动添加 px
7. 注释需要写在花括号中
8. JSX 允许在模板中插入数组，数组会自动展开所有成员(为一个简单的html元素赋予一个数组,会被自动展开, 如果有嵌套,目测无法自动展开)
9. 可以用函数来定义组件,也可以用ES6 class 来定义一个组件
10. const element = 为用户自定义的组件。
11. 原生 HTML 元素名以小写字母开头，而自定义的 React 类名以大写字母开头, 组件类只能包含一个顶层标签，否则也会报错
12. 如果我们需要向组件传递参数，可以使用 this.props 对象 实例
13. React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。
14. componentDidMount() 与 componentWillUnmount() 方法被称作生命周期钩子。在组件输出到 DOM 后会执行 componentDidMount()
15. 由于 this.props 和 this.state 都用于描述组件的特性，可能会产生混淆。一个简单的区分方法是，this.props 表示那些一旦定义，就不再改变的特性，而 this.state 是会随着用户互动而产生变化的特性。
16. 数据自顶向下流动,父组件或子组件都不能知道某个组件是有状态还是无状态，并且它们不应该关心某组件是被定义为一个函数还是一个类。这就是为什么状态通常被称为局部或封装。 除了拥有并设置它的组件外，其它组件不可访问。
17. state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据
18. 可以通过组件类的 defaultProps 属性为 props 设置默认值
19. Props 验证使用 propTypes，它可以保证我们的应用组件被正确使用，React.PropTypes 提供很多验证器 (validator) 来验证传入数据是否有效。当向 props 传入无效数据时，JavaScript 控制台会抛出警告
    1. React.PropTypes 在 React v15.5 版本后已经移到了 prop-types 库。
20. React 元素的事件处理和 DOM 元素类似。但是有一点语法上的不同:
    1. React 事件绑定属性的命名采用驼峰式写法，而不是小写。
    2. 如果采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串(DOM 元素的写法)
    3. React 中另一个不同是你不能使用返回 false 的方式阻止默认行为， 你必须明确的使用 preventDefault
    4. 使用 React 的时候通常你不需要使用 addEventListener 为一个已创建的 DOM 元素添加监听器。你仅仅需要在这个元素初始渲染的时候提供一个监听器。
       1.

样例代码:

1. 可以用函数来定义组件,也可以用ES6 class 来定义一个组件

    function HelloMessage(props) {
        return <h1>Hello World!</h1>;
    }

    class Welcome extends React.Component {
      render() {
        return <h1>Hello World!</h1>;
      }
    }

2. xxx

常见问题和答案:

1. react函数组件与类组件的区别

    1.在react组件可分为函数组件和类组件二种形式，但在函数组件中组件是无生命同期的，而在类组件中是有生命同期的
    2.在函数组件中是无状态的，而在类组件中是有状态的，而在实院的开发中用得最多的是函数组件，而当有状态时才选中类组件
    3.在函数组件中this的指向是乱的，而在类组件中this的指向是当前的类的实例对向。

一些讨论:

1. 9102 年的 React 组件要怎么定义

    1. 总是优先使用函数组件
    2. React.PureComponent 是由官方提供来优化 React 组件，减少组件 render 次数用的.只有在你确实碰到了性能问题，才应该去考虑是否使用 PureComponent，并且应该用性能分析工具去比较优化的结果，因为有时候对 props 的比较并不一定比组件树的比较更快，如果你的 props 会经常变化的，就像缓存一样，这个优化的命中率会很低。同样的道理适用于 shouldComponentUpdate 和 React.memo 的使用。
    3. 由于 Hooks 的引入，函数组件也不再是以前的“无状态组件”了，类组件能做的事函数组件也几乎都能做。因为目前 getSnapshotBeforeUpdate 和 componentDidCatch 这两个 API 还没有对应的 Hooks 实现，所以要用这两个 API 还需要类组件。而实际使用中，使用这两个 API 的情况是比较少的
    4. 9102 年你应该用 TypeScript 来写你的 React 应用了

1. 为什么 React 现在要推行函数式组件，用 class 不好吗？

    1. hooks是比HOC和render props更优雅的逻辑复用方式。
    2. 函数式组件的心智模型更加“声明式”。hooks（主要是useEffect）取代了生命周期的概念（减少API），让开发者的代码更加“声明化”：
        2.1 人们过去使用生命周期不就是为了判断是否要执行副作用吗？现在hooks直接给你一个声明副作用的API，使得生命周期变成了一个“底层概念”，无需开发者考虑。
            - 旧的思维：“我在这个生命周期要检查props.A和state.B（props和state），如果改变的话就触发xxx副作用”。这种思维在后续修改逻辑的时候很容易漏掉检查项，造成bug。
            - 新的思维：“我的组件有xxx这个副作用，这个副作用依赖的数据是props.A和state.B”。从过去的命令式转变成了声明式编程。
        2.2 除了声明副作用的API，react还提供了声明“复杂计算”的API（useMemo），取代了过去“在生命周期做dirty检查，将计算结果缓存在state里”的做法。
    3. 函数式组件的心智模型更加“函数式”。react团队正在循序渐进地教育社区，为未来的并发模式打下基础。

1. 一网打尽 React 重难点
2. 如何考察候选人的react技术水平？
3. 【译】React函数组件和类组件的区别 / [译]React函数组件和类组件的差异 (以上这俩是同一篇原文的译文)
4. [翻译] TypeScript 和 JSX 搞基的事

相关类库

TypeScript

1. Typescript配合React实践

Redux

1. Redux资源:Redux官网, Redux 简介 - IBM
2. awesome react - redux
3. react-redux一点就透，我这么笨都懂了！
   • redux是react全家桶的一员，它试图为 React 应用提供「可预测化的状态管理」机制。
   • Redux是将整个应用状态存储到到一个地方，称为store
   • 里面保存一棵状态树(state tree)
   • 组件可以派发(dispatch)行为(action)给store,而不是直接通知其它组件
   • 其它组件可以通过订阅store中的状态(state)来刷新自己的视图
4. Why Use React Redux?
5. 阮一峰: Redux 入门教程

MobX

1. MobX官网-英文, MobX官网中文镜像
   1. MobX 是一个经过战火洗礼的库，它通过透明的函数响应式编程(transparently applying functional reactive programming - TFRP)使得状态管理变得简单和可扩展。MobX背后的哲学很简单:
2. awesome react - MobX
3. MobX 只能在 ES5 环境中运行
   1.

RxJS

1. RxJS官网, RxJS中文同步翻译
   1. RxJS 是一个库，它通过使用 observable 序列来编写异步和基于事件的程序
      1.

常见错误的原因和解决

ReactApp 脚手架工具 - Create-react-app / 中文文档 / Github - Create-react-app
React + Typescript 工程化治理实践
React Native 工程化实践

Recoil - A state management library for React
Recoil - Facebook 官方 React 状态管理器