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- alertindex.jsx- footerindex.jsx- navindex.jsx比如：导航、弹出层、loading加载动画、分页器等
- images凡事页面中<img src>标签使用的图片
- js页面中编写的js功能及开发文件
- storereduxmobxcontext
- stylesimg/css、less、scss
- unitjs一些组件比如，如果不用jq,自己封装一些js 的方法如果手机端有活动页面都需要下载app,同的app 的判断如果有弹出去js等
- viewshomeindex.jsxaboutindex.jsxjoinedindex.jsxlist.jsxother.jsx
- other
