入门react

前言：今天翻到了很久以前学习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 子组件 使用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天免登陆

 

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