入门react

前言：今天翻到了好久之前学习react时的笔记，拿出来记录一下以免忘掉，里面主要是记录了安装环境，创建项目，启动项目，jsx，组件介绍，组件通信，多层嵌套，路由搭建，路由传参，redux。记录的比较浅薄，但是还是有一点点的帮助，因为自己最近一直在使用vue，所以拿来回忆一下还是不错的，都是比较基础的。

安装

准备 node 版本 8.10 以上 node -v查看node 版本

 $ cnpm install -g create-react-app 安装环境
 $ create-react-app my-app 创建一个项目，并命名
 $ cd my-app/ 进入项目
 $ npm start 启动项目

 jsx js+xml(标签语法，类似于html)
 jsx javascript的拓展语言，完全是javascrip内部实现的
 jsx 只能又一个父标签
 jsx 可以使用{表达式}
 JSX 代码的外面扩上一个小括号
 jsx 添加样式 使用className

组件

1、函数组件（无状态组件） 2、类组件（有状态组件）
注意：

组件名称必须以大写字母开头。

组件通信

子传父

 子组件 使用this.props.事件名（参数）
 父组件 <子组件 事件名＝｛处理函数｝>
 父组件的处理函数中的参数 就是子组件传递过来的数据

vue

在使用 子组件上自定义一个事件 <ComA :on-show={xxx}/>
子组件中 使用 $emit('on-show',值)

多层嵌套

 引入 prop-types
 父组件
 声明 childContextTypes 进行数据验证
 声明 getChildContext 提供数据和方法 供下级组件使用
 子组件
 声明contextTypes 进行数据验证
 在事件中 使用this.context.方法名（上级组件 childContextTypes中声明的方法 ）

兄弟

cnpm install events
引入events
、创建 event.js文件
import { EventEmitter } from 'events';
export default new EventEmitter();
导出 emitter对象
A 组件接受数据 使用emitter.addListener（‘changeMessage’） 注册一个事件
B 组件发送数据 使用emitter.emit('changeMessage', '数据');

、发送数据的组件
引入emitter对象
使用 emitter.emit('changeMessage', 'message'); 通过changeMessage 发送一个数据message

、在接收数据的组件中
引入emitter对象
注册接受函数 使用 emitter.addListener('changeMessage',function(message){ message参数就是传递过来的数据})

children

在组件中获得 使用组件时候在组件中以任何形式(标签元素)传递过来的数据 和slot 很相似

受控组件和非受控组件

 受控组件 input中的value值通过state值获取，onChange事件改变state中的value值，input中的value值又从state中获取
 非受控 非受控也就意味着我可以不需要设置它的state属性，而通过ref来操作真实的DOM。

路由搭建

 引入 react-router-dom 路由核心组件
 引入 react-loadable 路由懒加载方式
 HashRouter 使用 URL 中的 hash（#）部分去创建形如 example.com/#/some/path 的路由。
 BrowserRouter 是使用 React Router 的应用推荐的 history。
 它使用浏览器中的 History API 用于处理 URL，创建一个像example.com/some/path这样真实的 URL 。
 exact的值为bool型，为true时表示严格匹配，为false时为正常匹配。

路由懒加载

 路由懒加载 可用于项目优化 会把项目分包 非路由懒加载打包后就一个资源包。加载很慢
 路由懒加载 会按照路由模块进行分包 所以浏览器在加载这些 小资源包的时候会更快。

路由传参数

 <Route path='/path/:name' component={Path}/>
 <link to="/path/2">xxx</Link>
 编程式导航 this.props.history.push({pathname:"/path/" + name});
 读取参数用:this.props.match.params.name

 this.props.history.goBack() 等同于 this.props.history.go(－)相当于浏览器自带的后退 不写参数 默认后退1级
 this.props.history.go() 前进/后退（负数） 相当于浏览器的 前进／后退按钮 参数代表前进／后退几级 go()刷新
 this.props.history.goForward() 等同于 this.props.history.go()
 this.props.history.location.pathname 代表当前路由地址

 嵌套（子）路由
 父路由组件中，在定义一个路由规则

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天免登录

就是这么多了，虽然里边不是特别详细，但是拿来回忆一下还是挺不错的，一个最基本的搭建使用流程，不是很完整，但是很简单，哈哈哈哈，就到这了，欢迎补充哦~