白褶的博客

外观

React UI的构建 ​

React：始终整体"刷新"页面

传统采用局部刷新，比如页面数据添加，则是添加新节点，React则是整体刷新页面。

React特性：

  • 1个新概念——引入组件

  • 4个必须API

  • Flux架构:单向数据流

  • 完善的错误提示

理解React组件 ​

props + state => view

由外部传入的属性和内部状态组成 view

  1. React组件一般不提供方法，而是某种状态机，状态如何结果如何。
  2. React组件可以理解为一个纯函数。
  3. 单项数据绑定，外部要知道内部组件发生了什么，则触发一个事件来暴露。

考虑组件构建 ​

  1. 创建静态UI。
  2. 考虑组件的状态组成(状态来自外部还是内部维护)。
  3. 考虑组件的交互方式(内部操作暴露出去)。

受控组件和非受控组件

  • 受控组件有外部来管理

  • 非受控组件由自身来管理

单一职责原则 ​

  1. 每个组件只做一件事。
  2. 如果组件变得复杂，那么应该拆分为小组件。

数据状态管理：DRY原则 ​

  1. 计算得到的状态不单独存储，直接使用。
  2. 组件尽量无状态，所需数据通过 props 获取。

JSX是语法糖 ​

JSX的本质：动态创建组件的语法糖。

jsx
const name = 'Nate Wang';
const element = <h1>Hello,{name}</h1>

const name = 'Josh Perez'
const element = React.createElement('hi',null,'Hello,',name);
  1. JSX本身也是表达式。
  2. 在属性中使用表达式。
  3. 延展属性。
  4. 表示作为子元素。

优点：

  1. 声明式创建界面的直观。
  2. 代码动态创建界面的灵活。
  3. 无需学习新的模板语言。

约定：自定义组件以大写字母开头。

  1. React认为小写的tag是原生DOM节点，如 div
  2. 大写字符开头为自定义组件。
  3. JSX标记可以直接使用属性语法，例如 <menu.Item/>