react入门基础教程.pptx

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