前言：今天翻到了好久之前学习react时的笔记，拿出来记录一下以免忘掉，里面主要是记录了安装环境，创建项目，启动项目，jsx，组件介绍，组件通信，多层嵌套，路由搭建，路由传参，redux。记录的比较浅薄，但是还是有一点点的帮助，因为自己最近一直在使用vue，所以拿来回忆一下还是不错的，都是比较基础的。
安装
准备 node 版本 8.10 以上 node -v查看node 版本
1 $ cnpm install -g create-react-app 安装环境 2 $ create-react-app my-app 创建一个项目，并命名 3 $ cd my-app/ 进入项目 4 $ npm start 启动项目
1 jsx js+xml(标签语法，类似于html) 2 jsx javascript的拓展语言，完全是javascrip内部实现的 3 jsx 只能又一个父标签 4 jsx 可以使用{表达式} 5 JSX 代码的外面扩上一个小括号 6 jsx 添加样式 使用className
组件
1、函数组件（无状态组件） 2、类组件（有状态组件）
注意：
组件名称必须以大写字母开头。
组件通信
子传父
1 子组件 使用this.props.事件名（参数） 2 父组件 <子组件 事件名＝｛处理函数｝> 3 父组件的处理函数中的参数 就是子组件传递过来的数据
vue
在使用 子组件上自定义一个事件 <ComA :on-show={xxx}/>
子组件中 使用 $emit('on-show',值)
多层嵌套
1 引入 prop-types 2 父组件 3 声明 childContextTypes 进行数据验证 4 声明 getChildContext 提供数据和方法 供下级组件使用 5 子组件 6 声明contextTypes 进行数据验证 7 在事件中 使用this.context.方法名（上级组件 childContextTypes中声明的方法 ）
兄弟
cnpm install events 引入events 1、创建 event.js文件 import { EventEmitter } from 'events'; export default new EventEmitter(); 导出 emitter对象 A 组件接受数据 使用emitter.addListener（‘changeMessage’） 注册一个事件 B 组件发送数据 使用emitter.emit('changeMessage', '数据'); 2、发送数据的组件 引入emitter对象 使用 emitter.emit('changeMessage', 'message'); 通过changeMessage 发送一个数据message 3、在接收数据的组件中 引入emitter对象 注册接受函数 使用 emitter.addListener('changeMessage',function(message){ message参数就是传递过来的数据})
children
在组件中获得 使用组件时候在组件中以任何形式(标签元素)传递过来的数据 和slot 很相似
受控组件和非受控组件
1 受控组件 input中的value值通过state值获取，onChange事件改变state中的value值，input中的value值又从state中获取 2 非受控 非受控也就意味着我可以不需要设置它的state属性，而通过ref来操作真实的DOM。
路由搭建
1 引入 react-router-dom 路由核心组件 2 引入 react-loadable 路由懒加载方式 3 HashRouter 使用 URL 中的 hash（#）部分去创建形如 example.com/#/some/path 的路由。 4 BrowserRouter 是使用 React Router 的应用推荐的 history。 5 它使用浏览器中的 History API 用于处理 URL，创建一个像example.com/some/path这样真实的 URL 。 6 exact的值为bool型，为true时表示严格匹配，为false时为正常匹配。
路由懒加载
1 路由懒加载 可用于项目优化 会把项目分包 非路由懒加载打包后就一个资源包。加载很慢 2 路由懒加载 会按照路由模块进行分包 所以浏览器在加载这些 小资源包的时候会更快。
路由传参数
1 <Route path='/path/:name' component={Path}/> 2 <link to="/path/2">xxx</Link> 3 编程式导航 this.props.history.push({pathname:"/path/" + name}); 4 读取参数用:this.props.match.params.name 5 6 this.props.history.goBack() 等同于 this.props.history.go(－1)相当于浏览器自带的后退 不写参数 默认后退1级 7 this.props.history.go(0) 前进/后退（负数） 相当于浏览器的 前进／后退按钮 参数代表前进／后退几级 go(0)刷新 8 this.props.history.goForward() 等同于 this.props.history.go(1) 9 this.props.history.location.pathname 代表当前路由地址 10 11 嵌套（子）路由 12 父路由组件中，在定义一个路由规则
redux
cnpm install redux cnpm install react-redux 什么是redux 数据状态管理：
就是说我们项目中有很多组件需要共享数据，这时候可以使用redux 搭建 ：
我一般都会创建3个文件夹。 action 里面我会定义 方法。这个方法用来触发reducers里面的处理逻辑。 因为方法里面 会返回两个字段，一个type 用来表示一个字符串， 还有一个data，就是调用actioni 面的方法时传递的参数 reducer 定义store里面的数据和处理逻辑。 处理逻辑通常使用 switch case 来选择对应的action传递过来的type 类型进行处理 store 里面会导出 reducer 封装好的数据 使用数据： 在 index.js 里面使用 provider 这个组件，将根组件和我们引入的store 联系起来。这样根组件中的所有组件都可以使用redux 在具体的某个组件中，引入 connect 方法，该方法用来将 mapStateToProps mapDispatchToProps 和当前组件关联起来 mapStateToProps 用来引入数据(store) mapDispatchToProps 用来引入 action里面的方法 使用this.props.store的名称 来获取redux里面的数据 使用 this.props.actios的名称 来获取action里面的方法
cookie
语法 document.cookie = 'key=value;exprese='过期时间.toGMTString();' escape(value) js 编码 unescape() 解码 什么是cookie 它类似于本地存储。 不过存的值比较小 4kb左右, 而且他可以设置过期时间。 接口请求是可以被携带到服务器， 使用场景，7天免登录
就是这么多了，虽然里边不是特别详细，但是拿来回忆一下还是挺不错的，一个最基本的搭建使用流程，不是很完整，但是很简单，哈哈哈哈，就到这了，欢迎补充哦~