React-入门基础教程

React概览•React的核心思想是：封装组件，各个组件维护自己的状态和UI，当状态变更，自动重新渲染整个组件。•基于这种方式的一个直观感受就是我们不再需要不厌其烦地来回查找某个DOM元素，然后操作DOM去更改UI。•React大体包含下面这些概念：组件JSXVirtualDOMDataFlow大纲开发环境配置JSX组件生命周期事件和属性DOM组合组件组件间通信Mixins表单打包发布学习资源开发环境配置npminit创建项目安装Webpack:npminstall–gwebpackWebpack使用webpack.config.js的配置文件package.json配置文件.babelrcbabel配置文件js目录结构：JSX•JSX简单来说就是为了把HTML模板直接嵌入到JS代码里面，这样就做到了模板和组件关联，但是JS不支持这种包含HTML的语法，所以需要通过工具将JSX编译输出成JS代码才能使用。组件•React组件两个核心概念props就是组件的属性，由外部通过JSX属性传入设置完成。state是组件的当前状态，可以把组件简单看成一个“状态机”，根据状态state呈现不同的UI展示。一旦状态（数据）更改，组件就会自动调用render重新渲染UI;可以通过this.setState方法解法组件生命周期•一个组件类必须由调用React.createClass创建，并且提供一个render方法以及其他可选的生命周期函数、组件相关的事件或方法定义。组件分为三个阶段：实例化、运行时及销会&清理期首次使用一个组件时，以下这些方法依次被调用:（实例化）•getDefaultProps•getInitialState•componentWillMount•render•componentDidMount当状态改变，以下这些方法依次被调用:(运行时)•componentWillReceiveProps•shouldComponentUpdate•componentWillUpdate•render•componentDidUpdate销毁，当该组件使用完成，componentWillUnmount方法将会被调用。（销毁）组件生命周期之实例化•getDefaultProps–对于组件，这个方法只会被调用一次，对于父组件指定的props属性，默认设置为该组件的props值。•getInitialState–这个方法只会调用有次，用于初始化组件的state。•componentWillMount–只会调用一次，在render（渲染）之前调用，这也是在render方法调用前修改组件state的最后一次机会•render–render方法是必须的。这里会创建虚拟DOM。•componentDidMount–在render方法成功调用并且真实的DOM已渲染后，可以在componentDidMount内部通过this.getDOMNode()来获取相应DOM节点。组件生命周期之运行时•componentWillReceiveProps–组件在接收到新的props时候调用，在初始化渲染时不会调用；一般是通过父组件来更改props•shouldComponentUpdate–在接收到新的props或state时在渲染之前调用，如果该方法返回false,则render()将不会执行。•componentWillUpdate–在接收到新的props或state之前将被调用。•componentDidUpdate–在渲染成功后将被调用，和componentDidMount方法类似。组件生命周期之销毁&清理期•componentWillUnmount–在组件从DOM中移除的时候被调用；比如在componentDidMount执行了setInterval()方法，在移除组件前可以通过componentWillUnmount方法来clearInterval()方法来结束任务事件和属性之事件•剪贴板事件–onCopyonCoutonPaste•键盘事件–onKeyDownonKeyPressonKeyUp•焦点事件–onFocusonBlur•表单事件–onChangeonInputonSubmit•鼠标事件–onClickonContextMenuonDoubleClickonDragonDragEndonDragEnteronDragExit–onDragLeaveonDragOveronDragStartonDroponMouseDownonMouseEnteronMouseLeave–onMouseMoveonMouseOutonMouseOveronMouseUp•触控事件–onTouchCancelonTouchEndonTouchMoveonTouchStart•UI事件–onScroll•滚轮事件–onWheel事件和属性之属性•HTML的属性和标签在React中大部分都被支持•class在React中使用className替换DOM操作•findDOMNode()–当组件加载到页面之后，可以通过ReactDOM.findDOMNode()方法拿到组件对应的DOM元素•Refs–通过在DOM元素上面设置一个ref属性指定一个名称，然后通过this.refs.name来访问对应的DOM元素。组合组件•使用组件的目的就是通过构建模块化的组件，相互组合组件最后组装成一个复杂的应用。组件间通信•父子组件间通信–这种情况下很简单，就是通过props属性传递，在父组件设置子组件的属性，所以子组件就可以通过props或者事件绑定访问到父组件的方法，这样就搭建起了父子组件间通信的桥梁。Mixins•Mixins–虽然组件的原则就是模块化，彼此之间相互独立，但是有时候不同的组件之间可能会共用一些功能，共享一部分代码。所以React提供了mixins这种方式来处理这种问题。–Mixin就是用来定义一些方法，使用这个mixin的组件能够自由的使用这些方法（就像在组件中定义的一样），所以mixin相当于组件的一个扩展，在mixin中也能定义“生命周期”方法。表单•状态属性•表单元素有这么几种属于状态的属性–value，对应input和textarea所有–checked，对应类型为checkbox和radio的input所有–selected，对应option所有•受控组件–对于设置了上面提到的对应“状态属性“值的表单元素就是受控表单组件，比如：•非受控组件–和受控组件相对，如果表单元素没有设置自己的“状态属性”，或者属性值设置为null，这时候就是非受控组件。打包发布•使用webpack–p进行打包资源•React官网•React中文社区：•React中文文档–中文文档地址–GitHub地址–阮一峰的React入门实例教程–极客学院整理的文档•React入门教程•React视频•ReactUI–Material-UI–Reactui–ANTDESIGNUI–React-Bootstrap–AmazeUIReact