React教程
qq20004604
前阿里巴巴,高级前端开发
展开
-
React(1)安装和基本示例
0、本项目的DEMOhttps://github.com/qq20004604/react-demo1、安装推荐使用 DEMO 的 package.json 配置来安装npm install运行(HMR):npm run dev单独安装npm install --save react react-domnpm i --save babel-preset...原创 2018-02-09 18:17:56 · 452 阅读 · 0 评论 -
React(17)异步组件
26、异步组件当在React里使用异步组件时,核心知识是两个:webpack 如何异步加载其他模块:通过 require(['xxx'], function(module){})来实现;React 里如何使用异步加载的这个模块:参考正常使用模块时的做法;【异步加载】关于 webpack 的异步加载,可以查看我写的这一篇异步加载实战DEMO.简单来说,就是 requir...原创 2018-02-12 18:21:54 · 4680 阅读 · 0 评论 -
React-router(1)基础用法
0、参考文献React Router 4 简易入门一个中文文档,但不确定是否是官方的,例子比较多初探 React Router 4.0 这个对标签的说明比较详细react-router v4 如何静态传值给子组件render和component的区别0.1、React-router 安装 这里的版本号是 “react-router-dom”: “^4.2.2”...原创 2018-03-04 22:01:49 · 841 阅读 · 0 评论 -
React-router(2)路由嵌套
2、路由嵌套: 参考 2.routingNested.js DEMO地址还是以上一节上面那个 DEMO 为示例。毫无疑问,我们肯定会面临路由嵌套的问题,即在顶级路由匹配到组件后,子组件里面也可能有一个次级路由。假如顶级路由的url为:/1,那么次级路由匹配后的路径一般来说是 /1/2;但是假如当前路径是 /1,然后次级路由里有这样一个标签 <Link to...原创 2018-03-04 22:03:49 · 3089 阅读 · 0 评论 -
React-router(3)BrowserRouter 和 HashRouter(哈希地址和普通地址)
3、BrowserRouter 和 HashRouter前两节的DEMO,都是 HashRouter,而非 BrowserRouter ,二者有所不同。以下解释的前提是你要懂什么叫 hash 地址,hash 地址就是指 # 号后面的 url。假如有一个 Link 标签,点击后跳转到 /abc/def。BrowserRouter: http://localhost:8080/abc...原创 2018-03-04 22:10:04 · 6651 阅读 · 2 评论 -
React-router(4)props 路由信息
4、propsDEMO地址 参考 3.props.jsreact-router 的路由信息,都存储在组件的 props 里。之所以是存在 props 里,是因为我们写在父组件里的,是 Route 标签,我们需要显示的组件,是作为 Route 标签的属性而传进去的。显然,而我们的组件,作为 Route 标签的子组件而存在,因此,路由数据通过 props 传给我们的组件,这也...原创 2018-03-04 22:18:20 · 5187 阅读 · 0 评论 -
React-router(5)params 路由传参
5、参数DEMO地址 参考 4.params.jsReact路由取参数,有两种:?a=1 :这种属于 search 字符串,在 location.search 里取值;/a/123 :这种需要从 match.params里取值;但无论哪种,路由获取到的值,是跳转后的那一刻的值,而不是实时更新的最新值。具体来说:假如 Link 标签跳转路径实时绑定输入框的一...原创 2018-03-04 22:19:11 · 31627 阅读 · 0 评论 -
React-router(6)父组件传 【值】 or 【函数】 给子组件
6、父组件传 【值】 or 【函数】 给子组件DEMO地址 参考 5.fromParentComponent.js如果你已经熟悉了前面的内容,会知道以下结论:路由传参是通过 props 传参的;子组件,是写在 Route 标签的 component 属性中的;通过 Route 标签绑定值,是无法将值,从父组件传给子组件的;那怎么办?解决方案也不难,思路如下:...原创 2018-03-04 22:19:56 · 3921 阅读 · 17 评论 -
React-router(7)path 和 url 的区别
7、path 和 url 的区别在 match 属性中,有 path 和 url 属性,大部分时间他们是一样的,那么区别是什么呢?假如路由匹配路径是 /Params/2/:myParams,实际跳转路径是 /Params/2/1(此时匹配成功)。那么;url:/Params/2/1path:/Params/2/:myParams...原创 2018-03-04 22:20:30 · 1957 阅读 · 0 评论 -
React-router(8)Link 标签 to 属性为对象时(路由信息传值)
8、Link 标签 to 属性为对象时(路由信息传值)DEMO地址 参考 6.routeInfo.js在组件里,每个组件的路由数据,都是各自独立的。在之前分析中,已知:match 属性的值,存储的是该 Route 标签的路由;location 属性的值,其中 url 和 path 不同 Route 组件中,值是相同的;但【2】并不准确,准确的说,自带的 has...原创 2018-03-04 22:42:13 · 7447 阅读 · 0 评论 -
React-router(9)重定向
9、重定向DEMO地址 参考 7.redirect.js重定向有两种方式,第一种是通过 <Redirect> 标签实现,第二种是通过编程式导航方式实现。【<Redirect> 标签】<Redirect to={'/default'}/>【编程式导航方式】this.props.history.push('/default'...原创 2018-03-04 22:42:52 · 5603 阅读 · 1 评论 -
React-router(10)登录拦截
10、登录拦截DEMO地址 参考 8.needLogin.js登录拦截说起来比较高大上,其实很简单。需要组件:登录功能组件;受保护组件(需要登录后才能访问);受保护组件的父组件(可选,如果 1 和 2 不是同一个路径,则需要,否则可以不需要)(用于进入受保护组件之前,检查登录信息,不符合要求则跳转到登录组件);逻辑:(有父组件,登录和受保护组件不是同一个路径)...原创 2018-03-04 22:43:28 · 7920 阅读 · 0 评论 -
React-router(11)路由配置
11、路由配置DEMO地址 参考 9.routeConfigTable.js简单来说,就是有一个对象,如下:const RouteConfig = [ { path: 'first', component: First, name: '第一个路由', routes: [ { ...原创 2018-03-04 22:44:09 · 3981 阅读 · 1 评论 -
聊聊React的一些玩法(上:工具篇)
1、简化写法我们在写 React 组件时,参考官方文档写法,一要声明 state,二要绑定函数的 this,常规写法如下:class DEMO extends React.Component { constructor() { super(); this.state = { count: 0 }; ...原创 2018-03-25 00:47:45 · 926 阅读 · 0 评论 -
React(16)包裹标签 React.Fragment
24、包裹标签 React.Fragment在 Vue 里,我们会用 <template></template> 标签来包裹一些不能有父容器的复数同级标签。例如在 <tbody></tbody> 标签中,我们只能放置 <tr></tr>标签,假如我们同时有多个 <tr> 标签被赋值给一个 JSX 变量,那么原创 2018-02-12 18:20:58 · 12976 阅读 · 0 评论 -
React(15)ref
23、ref用过 Vue 的同学,在使用 React 的 ref 时,注意不要混淆。在 Vue 中,ref 绑定的 DOM 元素,可以直接在组件实例里,通过 this.$refs.xxx 来获取。但是在 React 中,ref 的属性的值,是一个函数;函数的参数是当前 DOM 标签,或是组件实例;于是你可以在函数体内,通过 this.xxx = xxxx 来将该 DOM 赋值给...原创 2018-02-12 18:20:29 · 1192 阅读 · 0 评论 -
React(2)React的嵌套和组件实例
3、嵌套被嵌套的目标可以是函数或者类,需要以大写字母开头:函数是 return 的返回值,类是 render 函数的返回值;示例:// 被嵌套function Foo() { return <h3>这是一个h3标签</h3>}// 嵌套到目标ReactDOM.render( <div> <Foo...原创 2018-02-09 18:19:00 · 927 阅读 · 0 评论 -
React(3)变量使用、变量更新、父子组件变量传递
5、变量被中括号包含。let foo = 'world'class HelloWord extends React.Component { render() { return <div className={domClass}> Hello,{foo} </div> }}6、组件...原创 2018-02-09 18:20:17 · 16506 阅读 · 0 评论 -
React(4)事件处理
10、事件处理 事件的 this注意,事件触发的 this,默认指向的 undefined;所以请手动绑定 this 给事件相应函数。比如:this.clickCount = this.clickCount.bind(this) onChange 事件输入框获取修改后的值,通过 onChange 事件。假如事件的参数是 e,那么 e.target 获取到...原创 2018-02-12 18:08:27 · 379 阅读 · 0 评论 -
React(5)组件复用
11、组件复用同一个组件可以同时插入多个到父组件中,并且各个组件的状态是独立的。(和Vue的组件是一个道理,用法也类似)class HelloWord extends React.Component { constructor(props) { super(props); this.state = { count: 0 ...原创 2018-02-12 18:09:14 · 505 阅读 · 0 评论 -
React(6)生命周期(组件生命周期、state生命周期)
12、生命周期参考链接:React组件生命周期小结两个生命周期,分别是组件的生命周期,和状态变更的声明周期组件结构:父组件套用子组件初次渲染:constructor 【父组件】构造函数componentWillMount 【父组件】挂载前render 【父组件】渲染constructor 【子组件】构造函数componentWillMount 【子组件】挂载前...原创 2018-02-12 18:10:16 · 777 阅读 · 0 评论 -
React(7)异步的数据更改(setState 是异步行为)
与Vue不同,React的设置变量是异步的。13、setState 是异步行为 setState()这是一个异步操作,如:class HelloWord extends React.Component { constructor(props) { super(props); this.state = { co...原创 2018-02-12 18:11:21 · 3497 阅读 · 0 评论 -
React(8)条件渲染(类似 Vue 的 v-if)
14、条件渲染(类似 Vue 的 v-if)讲道理说,React 本身的条件渲染,没有 Vue.js 用起来舒服。Vue.js 只需要在标签上添加 v-if 或者 v-show 就行,但 React 就比较麻烦了。class HelloWord extends React.Component { constructor(props) { super(props)...原创 2018-02-12 18:12:02 · 20503 阅读 · 5 评论 -
React(9)列表渲染(对标Vue的 v-for)
15、列表渲染(对标Vue的 v-for)【实现思路】基础:数组的元素是 JSX 语法的 DOM,该数组作为 JSX 语法的 DOM,可以自动拼起来;实现:遍历数组,然后将将数组元素变为 JSX 语法的 DOM,得到一个新的数组(元素是 JSX 的 DOM),将这个新数组作为变量插入到渲染元素中即可。如以下代码:class HelloWord extends React....原创 2018-02-12 18:12:41 · 4703 阅读 · 0 评论 -
React(10)React表单元素应用方法大全
16、表单总结写前面值的改变,通过 onChange 事件触发(包括文字输入框、radio、checkbox);选中与否,通过设置 HTML 元素的 checked 等于一个符合要求的 state 的值(因此表达式结果为 true,于是 checked='true' 就是选中),来实现。【form】标签:如果用 form 标签的话,在通过 submit 按钮提交时,会自动触发...原创 2018-02-12 18:17:41 · 663 阅读 · 0 评论 -
React(11)组件通信
17、组件通信这个很好理解,我们开发常面对几种情况:子组件 需要使用 父组件 的值:通过标签传入,props取值,如:<Status temperaature={this.state.temperaature}></Status>父组件 需要使用 子组件 的值:不能直接将父组件值传入子组件并在子组件修改(不好),应采用父组件传函数到子组件,子组件调用父组件的该函...原创 2018-02-12 18:18:10 · 450 阅读 · 1 评论 -
React(12)组合(类似 Vue 组件的插槽)和继承
18、组合(类似 Vue 组件的插槽)在Vue中,假如我们需要让子组件的一部分内容,被父组件控制,而不是被子组件控制,那么我们会采用插槽的写法 <slot></slot> 在 React 里也有类似的写法,父组件写法是相同的,但子组件是采用 {this.props.children} 来实现。示例:class MyChild extends React....原创 2018-02-12 18:18:47 · 7269 阅读 · 0 评论 -
React(13)style 和 class
20、style 写法JSX里,写 style 属性,有几点需要注意:以 k-v (对象)形式来写 style 属性(如果直接写在 html 标签里,容易以为是双大括号,事实上还是单大括号);key 使用驼峰写法;值是字符串;如果想混合多个属性,需要先通过例如 Object.assign() 将其混合为一个对象,再使用。 不能 使用数组或写 2 个 style={} 来实现;...原创 2018-02-12 18:19:19 · 689 阅读 · 0 评论 -
React(14)JSX 的一些语法说明
22、JSX【1】标签名可以是对象的属性(前提对象属性是一个组件)这种情况下,对象和属性的首字母,可以不大写(但 建议大写 ,以作区分)let MyDom = { my() { return <p>这是一行</p> }}class MyInput extends React.Component { render(...原创 2018-02-12 18:19:53 · 312 阅读 · 0 评论 -
聊聊React的一些玩法(下:九步玩转React容器组件与展示组件)
3、实战容器组件和展示组件的玩法如果学过 redux 的话,会知道, redux 的思想是容器组件和展示组件分离,容器组件存数据,展示组件秀样式。但是光看不练,恐怕很难理解这种玩法。我在这里,不使用 Redux,而是使用原生的 React,一步一步带着做一个带【两级产品信息(订单级与商品级)】,包含选中产品、选择订单、全选、统计选中信息的功能。为了方便理解,我的逻辑尽量写的清楚明确...原创 2018-03-26 00:24:39 · 2125 阅读 · 0 评论