react是什么
用于动态构建用户界面的javaScript库 （只关注视图）
react是谁开发的
由Facebook开发，且开源。
react的优点
1、高效，使用虚拟DOM+优秀的Diff算法，尽量减少与真实DOM的交互
2、组件化开发
3、声明式编码
3、在React Native中可以使用React语法进行移动端开发
react如何将虚拟DOM渲染到页面
ReactDOM.render(被渲染的虚拟DOM,document获取的根节点)
创建组件的两种方式
函数组件
function View() { return ( // 语法上必须要有根元素包裹 // 可以用es6语法 <div > <h1>这是一个函数组件</h1> </div> ); }
类组件
import React, { Component } from 'react'; class View extends Component{ render() { return ( <div>这是一个text类组件</div> ) } }
组件传参
父传子
场景一：
传递变量
父组件中直接绑定变量
语法：
传递单个 <Son data={obj}/>
传递多个 <Son data={obj}{...obj2}/> or <Son data1={obj1} data2={obj2}></Son>
子组件this.props.data接收
data 是自定义的属性名
为什么传的第二个对象不解构会报错？
因为第一个对象会有data作为属性名，而第二个对象不解构就没有属性名
【注意】：扩展运算符是不可以直接在对象上使用，这是是因为有react环境的支持
场景二：
传递内容
组件极少部分不同时使用
父组件中双标签包裹内容
语法： <Son><a>我是父组件传来的内容<a></Son>
子组件用this.props.children接收
一般用双标签，也就是为了这样传递参数
场景三：
传递组件
大多用于子组件大部分相同，少数不同时使用
父组件绑定组件名称
语法：<Parent left={ <Son1> }> <Parent left={ <Son2> }>
子组件this.props.left接收
left 是自定义的属性名
简化写法
那我们都知道双标签里的内容可以用this.props.children接收
下边是一种更简单的写法
<Son children="内容" /> <div {...this.props} >
这两个有同样的效果，这样你可能看不出简便在哪里，看例子
当我们复用一个组件时，往往会接收多个参数，className…… 、activeClassName、children
正常的写法(看上去已经够简便了吧)
<Son className="" activeClassName="" …… >内容</Son> <div {...this.props}>{this.porps.children}</div>
单标签接收children（这样用是不是就更加简便了呢）
<Son className="" activeClassName="" children="内容" /> <div {...this.props}></div>
混合使用
this.renderProps
实现过程
有A、B、C
A和B确定是父子关系
A组件中写入<A render={(name)=><C name = {name} /> }/>
B 中this.props.render(name)
此时C组件就成了B组件的子组件，可以接收到属性为name的参数
说这样是在B组件中预留了一个类似插槽的作用
可以拿到B组件的数据
修改时直接在A组件中修改（）
子传父
通过函数的回调方式
父组件通过子组件的标签传递函数，子组件调用函数即可
语法<Son callback={fn}></Son>
子组件通过this.props.fn() 执行函数
react的文件目录
1、pubilc
- index.html - favicon.ico - manifest.json 移动App的配置文件,用于指定应用的显示名称、图标、入口页面等信息.
2、src
- components - alert index.jsx - footer index.jsx - nav index.jsx 比如： 导航、弹出层、loading加载动画、分页器等 - images 凡事页面中<img src>标签使用的图片 - js 页面中编写的js功能及开发文件 - store redux mobx context - styles img/ css、less、scss - unit js一些组件 比如， 如果不用jq,自己封装一些js 的方法 如果手机端有活动页面都需要下载app,同的app 的判断 如果有弹出去js等 - views home index.jsx about index.jsx joined index.jsx list.jsx other.jsx - other
