一.虚拟dom
创建方式：1.<script type='text/javascript'> const getNew=react.createElement('name',{id},'content') ReactDom.render(getNew,document.getElementById('id'));//渲染 </script> 2.<script type='text/babel'>//浏览器不能直接解析JSX代码，需要babel.js转译 const getNew=<h1 id={id}>{content}</h1>//使用jsx语法 ReactDom.render(getNew,document.getElementById('id'));//渲染 </script>虚拟dom和真实dom是一一对应关系；轻----》重；更新虚拟dom本身，是不会更新界面的，只有render时才会更新界面;
二.jsx
作用：用来创建虚拟dom，const getNew=<h1 id={id}>{content}</h1>==>1.不是字符串；2.不是标签；3.是一个js对象；三.模块和组件，模块化和组件化
模块：向外提供特定功能的js程序，即一个js文件 模块化和组件化：形容项目或编码方式 组件：实现局部特定功能的代码集合（html/js/css）四.面向组件编程
1.工厂函数组件--》简单组件（没有状态的组件） eg: function Test(props){ return <h2>函数组件</h2> } 2.es6类组件-----》复杂组件 eg: class Test extends React.component{ render(){ return <h2>函数组件</h2> } } /组件内新添加的方法：内部this不是组件对象 /组件内的render()方法，内部this是组件对象（此方法是组件内置的方法） ***解决：1强制绑定 constructor(){ this.fn=this.fn.bind(this) } 调用：{this.fn}//此种绑定方式this.fn传给组件标签后是丢失了this的
foo(a),接收到参数a时，并不知道a是其他变量的属性，故函数内部this指向为undefined
2.使用箭头函数的方式调用 {（）=>{this.fn()}} 注：箭头函数的this指向由其外层的普通函数的this指向来决定五.组件三大属性
state props： 指定属性默认值：组件名.defaultProps={} 指定属性值的类型和必要性：组件名.propTypes={key:PropTypes.string/func/number.isRequired...} refs:方式1<h2 ref='content'></h2> 获取：this.refs.content//可以拿到h2dom元素 方式二： <input ref={input=>this.input=input} /> 获取 this.input 子组件中不能直接改变父组件的状态 解决：父组件定义函数，传递给子组件，子组件调用