React基础之如何构建React应用程序

本篇目录:

  • 步骤1:将 UI 拆解到组件层次结构中
  • 步骤2: 用 React 构建一个静态版本
  • 步骤3: 确定 UI state(状态) 的最小(但完整)表示
  • 步骤4:确定 state(状态) 的位置
  • 步骤5:添加反向数据流

阅读全文

React基础之受控组件(Controlled Components)和不受控组件

本篇目录:

  • 受控组件
    • 表单
      • 元素
      • 表单元素
    • 受控组件(Controlled Components)
      • 受控表单的表单元素
        • textare
        • select
      • 处理多个输入元素
    • 受控组件的替代方案
  • 不受控组件
  • 受控组件与不受控组件的选取

阅读全文

React基础之列表(Lists)和键(Keys)

本篇目录:

  • 列表(Lists)
    • 多组件渲染
    • 基本列表组件
  • 键(Keys)
    • 使用 keys 提取组件
    • keys 在同辈元素中必须是唯一的
    • keys的内部性
  • 在 JSX 中嵌入 map()

阅读全文

React基础之Props 验证

Props 验证使用 propTypes,它可以保证我们的应用组件被正确使用,React.PropTypes 提供很多验证器 (validator) 来验证传入数据是否有效。当向 props 传入无效数据时,JavaScript 控制台会抛出警告。

常见的验证器:

React.createClass({
  propTypes: {
    // 可以声明 prop 为指定的 JS 基本数据类型,默认情况,这些数据是可选的
    optionalArray: React.PropTypes.array,
    optionalBool: React.PropTypes.bool,
    optionalFunc: React.PropTypes.func,
    optionalNumber: React.PropTypes.number,
    optionalObject: React.PropTypes.object,
    optionalString: React.PropTypes.string,

阅读全文

React基础之状态(State)和生命周期(Life Cycle)

本篇目录:

  • 状态(State)
    • 什么是状态
    • 函数式组件转化为类组件
    • 类组件中添加State
    • 如何修改State
    • 正确地使用 State(状态)
      • 不要直接修改 state(状态)
      • state(状态) 更新可能是异步的
      • state(状态)更新会被合并
  • 生命周期方法
    • 什么是生命周期
  • 数据向下流动
  • 结语

阅读全文

React基础之元素、组件与属性

本篇目录:

  • 元素(Elements)
    • 渲染元素到DOM
    • 更新已经渲染的元素
  • 组件(Components)
    • 组件的分类
    • 渲染组件
  • 属性(Props)
    • Props是只读的

阅读全文