随笔 - 261  文章 - 0  评论 - 22  阅读 - 55万
12 2018 档案
react中的路由模块化
摘要:在vue中,可以将路由单独写在一个配置文件中,便于整理维护,而在前面总结整理的react中,都是直接将路由配置放在需要使用的地方,少数的时候话可以接受,但是当项目做大,这种方式就不再被推荐了,我们再react中,也可以向vue那样,将路由配置模块化,然后在需要使用的地方引入就可以了。 本次路由模块化 阅读全文
posted @ 2018-12-19 22:01 紅葉 阅读(3661) 评论(2) 推荐(0) 编辑
react路由嵌套
摘要:所谓的嵌套路由就是在某些以及路由下面存在二级路由,这些二级路由除了公用一级路由导航模块外,还公用当前的二级路由的导航模块,也就是部分进行了切换,要实现嵌套路由,首先回顾之前的内容,实现基本的react路由,如下所示: 基本路由 1,创建项目:npx create-react-app react-ro 阅读全文
posted @ 2018-12-18 21:50 紅葉 阅读(1557) 评论(0) 推荐(0) 编辑
react中的数据请求
摘要:在react中,没有提供专门的请求数据的模块,所以我们可以采用第三方请求数据的模块进行数据请求,常见的有axios和fetch-jsonp,下面来总结这两种方式的用法。 axios 查看文档 https://github.com/axios/axios 创建项目 1,使用npx create-rea 阅读全文
posted @ 2018-12-17 21:24 紅葉 阅读(3369) 评论(0) 推荐(0) 编辑
react路由传值
摘要:在上一篇总结了react中路由的基本用法,实现了基本的页面跳转,但这肯定是不够用的,比如说在新闻列表页面,点击某一条新闻,希望页面能跳转到新闻详情页,又该如何实现呢? 首先继续上一篇的项目,添加一个新闻详情页面组件content.js 然后在根组件App.js中配置路由: 最后,修改新闻列表组件Ne 阅读全文
posted @ 2018-12-16 23:12 紅葉 阅读(506) 评论(0) 推荐(0) 编辑
react-router 4.x
摘要:本次主要总结react中的路由的使用,实现让根组件根据用户访问的地址动态挂载不同的组件。 1,创建项目 首先使用命令 npx create-react-app react-router创建项目,然后npm install下载相关依赖,再按照之前的文件目录整理src文件夹,最后再components文 阅读全文
posted @ 2018-12-16 22:02 紅葉 阅读(231) 评论(0) 推荐(0) 编辑
react生命周期函数
摘要:在react中,生命周期函数指的是组件在加载前,加载后,以及组件更新数据和组件销毁时触发的一系列方法。通常分为以下几类: 组件数据更新的时候触发的函数:shouldComponentUpdate、componentWillUpdate、render、componentDidUpdate 组件销毁的时 阅读全文
posted @ 2018-12-16 01:14 紅葉 阅读(1090) 评论(0) 推荐(0) 编辑
defaultProps和propTypes
摘要:在上一篇文章中总结了父子组件的数据传递,下面先来简单的回顾一下之前的内容: 此时,子组件中div里面的数据依赖于父组件传递过来的数据,那么当父组件没有给子组件传递数据时,子组件div里面就没有了数据了,这显然也不符合我们的预期,我们希望给子组件一个默认值,当父组件传递了数据过来时,就显示父组件传递的 阅读全文
posted @ 2018-12-15 23:29 紅葉 阅读(292) 评论(0) 推荐(0) 编辑
react组件的数据传递
摘要:在react中,为了解决html标签构建应用的不足,将公共的功能单独抽离成一个文件作为一个组件,在使用的地方按需引入,既然是组件彼此调用,就会涉及到父子组件的通信,下面主要来总结简单的组件通信。 1,项目准备 在开始组件通信前,先在components中新建两个文件,News.js和Header.j 阅读全文
posted @ 2018-12-15 22:53 紅葉 阅读(574) 评论(0) 推荐(0) 编辑
react表单事件和取值
摘要:常见的表单包括输入框,单选框,复选框,下拉框和多文本框,本次主要总结它们在react中如何取值。 输入框 在之前有说过输入框,可以先给input框的value绑定一个值,然后通过input框的改变事件来获取用户输入的值,并将这个值赋值给value绑定的值,就可以实现数据的双向绑定了。 单选框 单选框 阅读全文
posted @ 2018-12-15 17:32 紅葉 阅读(6914) 评论(0) 推荐(0) 编辑
约束性组件和非约束性组件
摘要:在上一篇写到模拟实现数据双向绑定的时候,使用到input的value属性,并通过onChange事件来监听这个属性值的变化,但是当我们使用了value属性却没有监听改变事件的时候,就会报错。 在警告信息中提醒我们使用defaultValue,因此,当把value换成defaultValue时,就不会 阅读全文
posted @ 2018-12-15 10:21 紅葉 阅读(474) 评论(0) 推荐(0) 编辑
react事件中的事件对象和常见事件
摘要:不管是在原生的js还是vue中,所有的事件都有其事件对象,该事件对象event中包含着所有与事件相关的信息,在react中,所有的事件也有其事件对象,在触发DOM上的某个事件时,就会产生一个事件对象。 在开始前,先按照之前创建项目的方法新建一个项目,然后对项目目录进行整理,并新建一个组件,在App. 阅读全文
posted @ 2018-12-13 21:27 紅葉 阅读(807) 评论(0) 推荐(0) 编辑
react事件中的this指向
摘要:在react中绑定事件处理函数的this指向一共有三种方法,本次主要总结这三种方式。 项目创建 关于项目的创建方法,在之前的文章中有记录,这里不再赘述,项目创建成功后,按照之前的目录结构对生成的项目进行调整,新建一个Home.js组件,并在App.js中引入该组件。 Home.js App.js 基 阅读全文
posted @ 2018-12-12 21:32 紅葉 阅读(6834) 评论(0) 推荐(0) 编辑
vue生命周期
摘要:关于vue中的生命周期,其实在刚开始接触vue的时候就有了解过,但一直都是一知半解的,最近又有用到,所以就借此机会总结一下。 项目准备 为了简化操作,这里只是总结生命周期函数,所以是直接在App.vue中进行操作的,只是为了需要,在src文件目录下新建了一个components文件夹,用来存放组件, 阅读全文
posted @ 2018-12-11 21:16 紅葉 阅读(212) 评论(0) 推荐(0) 编辑

< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8

点击右上角即可分享
微信分享提示