javascript： class
react：className
2、style的写法 （react的驼峰命名）
javascript： style="background-color:white"
react：style={{backgroundColor: "white"}}
3、变量（react变量是大括号，js是引号）
javascript： onClick="clickSearch(e)"
react：onClick={(e)=>this.clickSearch(e)}
4、资源的引入
javascript：
css: <link rel="stylesheet" href="../css/iuapmobile.um.css">
js:<script src="../js/summer.js" ></script>
react：
css: import SearchRoomStyle from './searchRoom.css'
js:import ForgetUser from '../components/ForgetUser.js'
用reactjs构建一个完整的前端页面的步骤：
准备：React 的安装包，建议去官网下载安装
1、使用 React 的网页源码，结构大致如下：
<!DOCTYPE html><html> <head> <script src="../build/react.js"></script> <script src="../build/react-dom.js"></script> <script src="../build/browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> // **用户代码 ** </script> </body></html>
上面代码有两个地方需要注意。
首先，最后一个 <script> 标签的 type 属性为 text/babel 。这是因为 React 独有的 JSX 语法，跟 JavaScript 不兼容。凡是使用 JSX 的地方，都要加上 type="text/babel" 。
其次，上面代码一共用了三个库： react.js 、react-dom.js 和 Browser.js ，它们必须首先加载。其中，react.js 是 React 的核心库，react-dom.js 是提供与 DOM 相关的功能，Browser.js 的作用是将 JSX 语法转为 JavaScript 语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。
2、将 src 子目录的 js 文件进行语法转换，转码后的文件全部放在 build 子目录。
$ babel src --out-dir build
3、渲染转换成html节点，以方便操作dom：
ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。
这里以插入hello world为例来说明
ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example'))
4、运行结果如下：
1.react是一个用于构建用户UI的JS库。
2.若要使用react创建项目，需全局安装：npm(cnpm) i -g create-react-app。
3.react里面的交JSX，即javascript + xml。
4.JSX里面的插入变量，需用{}，里面只支持表达式，不支持语句，例如（if else 则不能插入）
5.创建一个react项目，命令：create-react-app 项目名。
6.使用react，需在文件找中引入react(核心包)， react-dom(浏览器使用)。
7.react-dom包含了一个render方法，用于渲染JSX。
1.const Xabc = () =>{ return (<h1>hello world </h1>) } 在render中用帕斯卡命名方式引入，例:<Xabc/> 快捷键：rfc
2.class Xabc extends React.Component { render() { return (<div>你好</div>) } 快捷键：rcc
3.在react里面的JSX里，若是空元素，则推荐使用自闭合。
4.每一个组件的最外层只有一个根元素，在react 16 之后，新增了一个Fragment组件，用于如果您不想生成一层新的空DOM，可使用Fragment，在react中引入{Fragment}
5.this.props.children 是一种特殊的props，表示组件的子元素，相当于Vue里面的solt
6.如果是函数的方式创建的组件，想获取到props，需在函数的参数里面通过一个形参去获取。
7.父组件向子组件传参，直接在子组件调用的地方写属性，除字符串以外，都用{}.
1.用class创建的组件，也叫类组件，只有类组件才有state,若是用箭头函数创建的组件，也叫无状态组件（stateless component）
2.react里面的循环用数组的map实现。
3.创建state,一种是：直接在class里面：state= {}
4.第二种是constrcutor () {
super()
this.state = {}
}
1.在react里面，修改state必须在this.setState里面去修改，否则不会反应到render()里面
2.setState是异步的，若想获取最新的状态，需在setState中再传入一个回调函数，setState(val,[callback])，只有第二个参数才能获取到最新状态，第一个参数可以是一个对象，也可以是一个function，这个function的第一个参数是上一次的state的状态，必须return一个对象。
3.对于react的方法
1.用箭头函数，this则指向react
2.在DOM上调用时，用bind(this)改this指向
3.不推荐在render里面改指向，可以在constrcutor里面用bind改this。
深度拷贝与浅度拷贝的区别主要在于有没有为拷贝出的新对象在堆中重新分配一块内存区域。浅度拷贝即直接赋值，拷贝的只是原始对象的引用地址，在堆中仍然共用一块内存。而深度拷贝为新对象在堆中重新分配一块内存，所以对新对象的操作不会影响原始对象。
5.lodash
_.cloneDeep()
例如对一个input框进行聚焦事件
1.引入{createRef}
2.对需要的DOM 元素进行操作
3.创建
4.执行（注意要加 .current）
拷贝参考文档：https://segmentfault.com/a/1190000011403163
