React 入门基础教程.pptxVIP

React概览React的核心思想是：封装组件，各个组件维护自己的状态和UI，当状态变更，自动重新渲染整个组件。

基于这种方式的一个直观感受就是我们不再需要不厌其烦地来回查找某个DOM元素，然后操作DOM去更改UI。React大体包含下面这些概念： 组件JSXVirtualDOMDataFlow?2023最新整理收集do

something

大纲开发环境配置JSX组件生命周期事件和属性DOM组合组件组件间通信Mixins表单打包发布学习资源

开发环境配置npminit创建项目安装Webpack:npminstall–gwebpackWebpack使用webpack.config.js的配置文件package.json配置文件.babelrcbabel配置文件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的最后一次机会renderrender方法是必须的。这里会创建虚拟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()方法来结束任务

事件和属性之事件剪贴板事件onCopyonCoutonPaste键盘事件onKeyDownonKeyPressonKeyUp焦点事件onFocusonBlur表单事件onChangeonInputonSubmit鼠标事件onClickonContextMenuonDoubleClickonDragonDragEndonDragEnteronDragExitonDragLeaveonDragOveronDragStartonDroponMouseDown