React 简介
1. 由faceBook团队于 2013.5 推出。到目前版本已经更新到16.13.1
2. 16版本引入了Fiber算法，取代了之前的diff算法，解决了数据的同步加载导致的浏览器卡顿问题
3. 优点是：声明式，组件化，一次学习随处使用
4. 与Vue的区别：Vue是一个完整的mvvm框架，React是mvc里的view视图层框架
React中的 jsx
1. jsx 代码遵循 xml 规范 ， ① 标签必须闭合 ② 只能有一个根元素
2. 受控组件 input 或者 checkbox 除了value/checked属性绑定状态之外，还要配合onChange
非受控组件 只想显示默认值的话， 只绑定 defaultValue 就可以了。
3. jsx 代码是写在 script 标签之间的，为了避免与关键字保留字相同，所以样式中的class要写成className
4. jsx中的注释注意要写成 { /* */}
5. jsx的编译原理就是利用React.createElement方法，创建一个虚拟DOM
例如： const a = <h2 id="as">1</h2>
就等于 React.createElement(){
'h2', // 标签
{id:'as'}, // 属性
'1' // 内容
}
6. jsx 代码中，标签之间只能写一个{}
但是 在jsx 中写的内联样式是可以在{ }内再嵌套{ }的
React 的表达式
可以写简单的数字 字符串 函数 三目
但是不可以写对象
另外，Boolean 类型的数据，以及 undefined null 都不会显示
React 的事件
驼峰式
onClick onChange onMousemove onSubmit
React的遍历 及 应用
通过数组的map方法进行迭代行遍历,在遍历的过程中实现一些业务逻辑
模拟 Vue 的 v-if v-show 以及 v-for
v-for ==> xxx.map ... return
v-show ==> <div style={ { display : xxx ? 'block' : 'none' } }></div>
v-if ==> { xxx && <div></div>} 或者 { xxx || <div></div>}
[tips] ：v-if 短路操作实现
React 的组件 及 传参
1. 函数组件
2. 类组件
1. 函数组件
const componentA = props => {
return (
'jsx代码'
)
}
或
const componentA = function(props){
return(
'jsx代码'
)
}
2. 类组件
class componentB extends React.Component{
render(){
return (
"jsx代码"
)
}
}
传参
调用组件时传递参数,如：
<componentA name="ironman" age="32"/>
//但是接收到的时字符串，还可以通过{} 传参，实现传递数据类型
<componentA name="ironman" age={32} />
在函数组件中接收参数
props.name
在类组件中接收参数
this.props.name
React 中对象的处理
既然在jsx代码中是不可以写对象的，那么我们怎么处理对象呢？
通过 object 的方法 : Object.keys(obj) 获取到键的数组，遍历这个数组.
[例]
obj = {a:1,b:2,c:3}
在jsx代码中 👇
Object.keys(obj).map((item,index)=>{
obj[item] // 即实现了对象的遍历
})
