-
对比其他的框架
优势：
1.虚拟dom(传统js操纵dom很耗性能)
2.性能性很高
3.解决一些终端的问题（pc、移动端问题）劣势：
1.学习成本很高、学习曲线很陡
2.react本身能做的事并不多，想做大东西必须得用react插件（全家桶）
-
jsx自定义语法
写格式 ：
1个标签的书写格式
let a = <div>hello react!</div>
多个标签的书写格式 - 外面必须包一层根元素-
可以自由缩进
let a = <div> <div>sadasd</div> <span>asdasd</span> </div> 允许加括号 let a = (<div> <div>sadasd</div> <span>asdasd</span> </div>) 单标签规则 - 必须闭合 <img/> <input/> <br/> <div></div> class - className <div className='aaa'></div> jsx里面使用js代码{} var a = 'hello react!'; let b = <div>{a}</div> jsx - 支持style - 里面使用json
{{'background':'red'}}
第一层是使用告诉jsx我要用js了
第二层的是json的使用驼峰命名法 单词的首字母大写
第一个单词之后的首字母大写
onclick -> onClick
onmouseover -> onMouseOver
3.react的组件及class
-
js两种面向对象
1. es6之前那种 函数 -new 函数 = 类 类 - constructor 原型 - prototype （所谓的方法） 原型链 - __proto__ 2. es6=class constructor - 默认执行的函数 不支持变量提升 原型就是 和 constructor 同级的函数即可 继承 extends 可以继承原型和私有属性 如果子类想使用必须使用 this 子类constructor 放入super 参数如果想使用 子类参数放入 constructor 和 super 中 3. js改变this指向 1.call -1.第一个参数可以改变函数的this -2.从第一个参数之后的参数就是对应函数的行参 -3.函数会默认直接调用 2.apply -1.第一个参数可以改变函数的this -2.第二个参数是一个数组对象，数组对象的内容就是对应函数的行参 -3.函数会默认直接调用 3.bind -1.第一个参数可以改变函数的this -2.从第一个参数之后的参数就是对应函数的行参 -3.函数不会默认调用
-
react 组件
class 自定义名字 extends React.Component{ render(){ return (要渲染的内容) } }
-
react获取元素方式
获取非本身元素 1) <input ref='leo'/> 获取：this.refs.leo 获取本身事件源 2）e.target 原生的获取方法 3) query byid byclass bytagname byname react - vue、ng不同的一点 react不限制你的使用方式
-
react - 生命周期
componentWillMount 组件挂载前（组件渲染前） 1.找不到元素 2.属性、状态允许使用 componentDidMount 组件挂载后（组件渲染后） 1.可以找到元素 2.属性、状态允许使用 componentWillUpdate 组件更新前 componentDidUpdate 组件更新后 componentWillUnmount 组件卸载之前
-
react的事件冒泡
e <-react封装过的 nativeEvent 原生的事件对象 e.nativeEvent.stopImmediatePropagation() 停止立即的传播
-
react的表单
放在form里面的就是表单 如input 受控表单/非受控表单 受控 value='' checkbox defaultValue='' defaultChecked='' -
react的交互
并不限制你如何的去交互 angular - $http vue - re.... react - jquery/zepto/axios/fetch/ajax.... 虚拟dom 每一个内容都应该有自己的唯一标识 key -
react组件嵌套
<Child msg={父组件的数据}/> <Child fn={父组件的一个函数.bind(this)};
