React 入门

yiminghe@gmail.com

入门

包含

  • 是什么
  • 为什么
  • 怎么用
  • 搭建示例应用

不包含

  • 生态圈/公用组件
  • 应用框架
  • 编译/合并代码

如何运行以下 demo

是什么

react 是一个做 UI 的库，具体来说是做 UI 组件的库，专注于做 mvc 中的 v.

最简单的 react 组件

用状态控制组件变化

可以把一个组件看做一个状态机, 每一次状态对应于组件的一个 ui

为什么

  • api 少，类库易学
  • 组件内聚，易于组合
  • 原生组件和自定义组件融合渲染
  • 状态/属性驱动全局更新，不用关注细节更新
  • commonjs 生态圈/工具链完善

基础知识

jsx

event

composition

props/state

mixin

form

refs

component api

top api

jsx

类似 xml 的语法，用来描述组件树


                

                    #
                    1
                

            

                React.createElement('div',{
                className:'x'
                },[
                React.createElement('a',{href:'#'},'#'),
                React.createElement(Component,{x:'y'},1);
                ]);

注意和 html 语法不太一样，比如必须是驼峰命名， 以及属性名不能和 js 关键字冲突，例如：className,readOnly

jsx 嵌入变量

可以通过 {变量名} 来将变量的值作为属性值

jsx spread

可以用通过 {...obj} 来批量设置一个对象的键值对到组件的属性，注意顺序

props

通过 this.props 可以获取传递给该组件的属性值，还可以通过定义 getDefaultProps 来指定默认属性值

注意：默认值为所有组件实例共享的

prop validation

通过指定 propTypes 可以校验属性值的类型

注意：校验仅为提升开发者体验

state

组件内部的状态，可以使用 state

event

可以通过设置原生 dom 组件的 onEventType 属性来监听 dom 事件，例如 onClick, onMouseDown，在加强组件内聚性的同时，避免了传统 html 的全局变量污染

注意：事件回调函数参数为标准化的事件对象，可以不用考虑 ie

组合

可以像使用原生 dom 组件一样使用自定义的组件

组合 children

自定义组件中可以通过 this.props.children 访问自定义组件的子节点

mixin

mixin 是一个普通对象，通过 mixin 可以在不同组件间共享代码

form

和 html 的不同点：

  • value/checked 属性设置后，用户输入无效
  • textarea 的值要设置在 value 属性
  • select 的 value 属性可以是数组，不建议使用 option 的 selected 属性
  • input/textarea 的 onChange 用户每次输入都会触发（即使不失去焦点）
  • radio/checkbox 点击后触发 onChange

controlled components

如果设置了 value 属性，那么改组件变为受控组件，用户无法输入，除非程序改变 value 属性

controlled components

可以通过监听 onChange 事件结合 state 来改变 input 的值

uncontrolled components

设置 defaultValue 为设置 input 的初始值，之后 input 的值由用户输入

类似还有 defaultChecked

ref

该功能是为了结合现有非 react 类库，通过 ref/refs 可以取得组件实例，进而取得原生节点

注意：尽量通过 state/props 更新组件，不要使用该功能

component api

React.createClass 定义组件时允许传入的配置

  • getDefaultProps 得到默认属性对象
  • propTypes 属性检验规则
  • mixins 组件间公用方法

component lifecycle

React.createClass 定义时允许传入的函数，会在特定生命周期内调用

初次创建组件时调用

  • getInitialState 得到初始状态对象
  • render 返回组件树. 必须设置
  • componentDidMount 渲染到 dom 树中是调用，只在客户端调用，可用于获取原生节点

component lifecycle

组件的属性值改变时调用

  • componentWillReceiveProps 属性改变调用
  • shouldComponentUpdate 判断是否需要重新渲染
  • render 返回组件树. 必须设置
  • componentDidUpdate 渲染到 dom 树中是调用, 可用于获取原生节点

最后是 componentWillUnmount 组件从 dom 销毁前调用

component lifecycle demo

component lifecycle demo

top api

  • React.createClass 创建组件类
  • React.findDOMNode 从组件实例获取 dom 根节点
  • React.render 渲染组件到 dom
  • React.Children.* 操作 map/forEach children 工具类

一步步搭建一个评论应用

  • 评论的列表
  • 提交表单
  • 后端结合

组件分解

  • 顶层 CommentBox
    • 评论列表 CommentList
      • 单条评论 Comment
    • 评论表单 CommentForm

最简单的 CommentBox

组合组件

属性传递

使用 dom 库 marked

数据分离

从服务器取得数据

评论表单

最后：通知重新渲染

现场作业

实现一个 checkbox

功能点

  • 新生成组件/更新组件
  • checked/unchecked 交互处理
  • 键盘
  • label?

点击查看教程

Next: React 进阶