react知识点-2

• 你如何确定应该将哪些部分划分到一个组件中呢？你可以将组件当作一种函数或者是对象来考虑，根据单一功能原则来判定组件的范围。也就是说，一个组件原则上只能负责一个功能。如果它需要负责更多的功能，这时候就应该考虑将它拆分成更小的组件。

• UI（或者说组件结构）便会与数据模型一一对应，这是因为 UI 和数据模型都会倾向于遵守相同的信息结构

• 最好将渲染 UI 和添加交互这两个过程分开。这是因为，编写一个应用的静态版本时，往往要编写大量代码，而不需要考虑太多交互细节；添加交互功能时则要考虑大量细节，而不需要编写太多代码。所以，将这两个过程分开进行更为合适。

• 当你的应用比较简单时，使用自上而下的方式更方便；对于较为大型的项目来说，自下而上地构建，并同时为低层组件编写测试是更加简单的方式。

• 确定 UI state 的最小（且完整）表示
  通过问自己以下三个问题，你可以逐个检查相应数据是否属于 state：

  1. 该数据是否是由父组件通过 props 传递而来的？如果是，那它应该不是 state。
  2. 该数据是否随时间的推移而保持不变？如果是，那它应该也不是 state。
  3. 你能否根据其他 state 或 props 计算出该数据的值？如果是，那它也不是 state。

• 注意：React 中的数据流是单向的，并顺着组件层级从上往下传递。哪个组件应该拥有某个 state 这件事

对于应用中的每一个 state：

找到根据这个 state 进行渲染的所有组件。
找到他们的共同所有者（common owner）组件（在组件层级上高于所有需要该 state 的组件）。
该共同所有者组件或者比它层级更高的组件应该拥有该 state。
如果你找不到一个合适的位置来存放该 state，就可以直接创建一个新的组件来存放该 state，并将这一新组件置于高于共同所有者组件层级的位置。

• 一般来说，有两种改变数据的方式。第一种方式是直接修改变量的值，第二种方式是使用新的一份数据替换旧数据。

直接修改数据
var player = {score: 1, name: 'Jeff'};
player.score = 2;
// player 修改后的值为 {score: 2, name: 'Jeff'}
新数据替换旧数据
var player = {score: 1, name: 'Jeff'};

var newPlayer = Object.assign({}, player, {score: 2});
// player 的值没有改变, 但是 newPlayer 的值是 {score: 2, name: 'Jeff'}

// 使用对象展开语法，就可以写成：
// var newPlayer = {...player, score: 2};

• 生命周期详解：https://www.cnblogs.com/qiaojie/p/6135180.html
• react高阶组件 https://www.jianshu.com/p/68c6ab7c35dc
• 同一个高阶组件生成的新的组件间其实是相互不会影响的
• 1.高阶组件的生命周期不会影响传入的组件2.并不是高阶组件的所有生命周期都会先执行
• 生命周期
  componentWillMount 组件出现前 就是dom还没有渲染到html文档里面
  componentDidMount 组件渲染完成 已经出现在dom文档里
  可以再各个周期实现特定的操作
• React-Redux 规定，所有的 UI 组件都由用户提供，容器组件则是由 React-Redux 自动生成。也就是说，用户负责视觉层，状态管理则是全部交给它。
• 你只要调用 setState，组件就会重新渲染。我们顺利地消除了手动的 DOM 操作。