文档介绍：React 概览
React 的核心思想是：封装组件，各个组件维护自己的状态和 UI，当状态变更，自动重新渲染整个组件。
基于这种方式的一个直观感受就是我们不再需要不厌其烦地来回查找某个 DOM 元素，然后操作 DOM 去更改 UI。
React 大体包含下面这些概念：
组件
JSX
Virtual DOM
Data Flow
1
精选PPT课件
大纲
开发环境配置
JSX
组件生命周期
事件和属性
DOM
组合组件
组件间通信
Mixins
表单
打包发布
学****资源
2
精选PPT课件
开发环境配置
npm init 创建项目
安装 Webpack : npm install –g webpack
Webpack 使用的配置文件
配置文件
.babelrc babel 配置文件
js 目录结构：
3
精选PPT课件
JSX
JSX 简单来说就是为了把 HTML 模板直接嵌入到 JS 代码里面，这样就做到了模板和组件关联，但是 JS 不支持这种包含 HTML 的语法，所以需要通过工具将 JSX 编译输出成 JS 代码才能使用。
4
精选PPT课件
组件
React 组件两个核心概念
props 就是组件的属性，由外部通过 JSX属性传入设置完成。
state 是组件的当前状态，可以把组件简单看成一个“状态机”，根据状态 state 呈现不同的UI 展示。一旦状态（数据）更改，组件就会自动调用 render 重新渲染UI; 可以通过
5
精选PPT课件
组件生命周期
一个组件类必须由调用创建，并且提供一个 render 方法以及其他可选的生命周期函数、组件相关的事件或方法定义。组件分为三个阶段：实例化、运行时及销会&清理期
首次使用一个组件时，以下这些方法依次被调用: （实例化）
getDefaultProps
getInitialState
componentWillMount
render
componentDidMount
当状态改变，以下这些方法依次被调用: (运行时)
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate
销毁，当该组件使用完成，componentWillUnmount 方法将会被调用。（销毁）
6
精选PPT课件
组件生命周期之实例化
getDefaultProps
对于组件，这个方法只会被调用一次，对于父组件指定的props属性，默认设置为该组件的 props 值。
getInitialState
这个方法只会调用有次，用于初始化组件的state。
componentWillMount
只会调用一次，在render（渲染）之前调用，这也是在render 方法调用前修改组件 state 的最后一次机会
render
render 方法是必须的。这里会创建虚拟DOM。
componentDidMount
在 render 方法成功调用并且真实的DOM 已渲染后，可以在componentDidMount () 来获取相应DOM 节点。
7
精选PPT课件
组件生命周期之运行时
componentWillReceiveProps
组件在接收到新的props 时候调用，在初始化渲染时不会调用；一般是通过父组件来更改 props
shouldComponentUpdate
在接收到新的props 或 state 时在渲染之前调用，如果该方法返回false , 则 render() 将不会执行。
componentWillUpdate
在接收到新的 props 或 state 之前将被调用。
componentDidUpdate
在渲染成功后将被调用，和componentDidMount 方法类似。
8
精选PPT课件
组件生命周期之销毁&清理期
componentWillUnmount
在组件从DOM中移除的时候被调用；比如在componentDidMount 执行了setInterval() 方法，在移除组件前可以通过 componentWillUnmount 方法来clearInterval() 方法来结束任务
9
精选PPT课件
事件和属性之事件
剪贴板事件
onCopy onCout onPaste
键盘事件
onKeyDown onKeyP