入门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、函数组件(无状态组件) 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天免登录
就是这么多了,虽然里边不是特别详细,但是拿来回忆一下还是挺不错的,一个最基本的搭建使用流程,不是很完整,但是很简单,哈哈哈哈,就到这了,欢迎补充哦~