紅葉 - 博客园

2018年12月16日

摘要：在上一篇总结了react中路由的基本用法，实现了基本的页面跳转，但这肯定是不够用的，比如说在新闻列表页面，点击某一条新闻，希望页面能跳转到新闻详情页，又该如何实现呢？首先继续上一篇的项目，添加一个新闻详情页面组件content.js 然后在根组件App.js中配置路由：最后，修改新闻列表组件Ne 阅读全文

posted @ 2018-12-16 23:12 紅葉阅读(494) 评论(0) 推荐(0) 编辑

react-router 4.x

摘要：本次主要总结react中的路由的使用，实现让根组件根据用户访问的地址动态挂载不同的组件。 1，创建项目首先使用命令 npx create-react-app react-router创建项目，然后npm install下载相关依赖，再按照之前的文件目录整理src文件夹，最后再components文阅读全文

posted @ 2018-12-16 22:02 紅葉阅读(227) 评论(0) 推荐(0) 编辑

react生命周期函数

摘要：在react中，生命周期函数指的是组件在加载前，加载后，以及组件更新数据和组件销毁时触发的一系列方法。通常分为以下几类：组件数据更新的时候触发的函数：shouldComponentUpdate、componentWillUpdate、render、componentDidUpdate 组件销毁的时阅读全文

posted @ 2018-12-16 01:14 紅葉阅读(1076) 评论(0) 推荐(0) 编辑

2018年12月15日

defaultProps和propTypes

摘要：在上一篇文章中总结了父子组件的数据传递，下面先来简单的回顾一下之前的内容：此时，子组件中div里面的数据依赖于父组件传递过来的数据，那么当父组件没有给子组件传递数据时，子组件div里面就没有了数据了，这显然也不符合我们的预期，我们希望给子组件一个默认值，当父组件传递了数据过来时，就显示父组件传递的阅读全文

posted @ 2018-12-15 23:29 紅葉阅读(279) 评论(0) 推荐(0) 编辑

react组件的数据传递

摘要：在react中，为了解决html标签构建应用的不足，将公共的功能单独抽离成一个文件作为一个组件，在使用的地方按需引入，既然是组件彼此调用，就会涉及到父子组件的通信，下面主要来总结简单的组件通信。 1，项目准备在开始组件通信前，先在components中新建两个文件，News.js和Header.j 阅读全文

posted @ 2018-12-15 22:53 紅葉阅读(560) 评论(0) 推荐(0) 编辑

react表单事件和取值

摘要：常见的表单包括输入框，单选框，复选框，下拉框和多文本框，本次主要总结它们在react中如何取值。输入框在之前有说过输入框，可以先给input框的value绑定一个值，然后通过input框的改变事件来获取用户输入的值，并将这个值赋值给value绑定的值，就可以实现数据的双向绑定了。单选框单选框阅读全文

posted @ 2018-12-15 17:32 紅葉阅读(6890) 评论(0) 推荐(0) 编辑

约束性组件和非约束性组件

摘要：在上一篇写到模拟实现数据双向绑定的时候，使用到input的value属性，并通过onChange事件来监听这个属性值的变化，但是当我们使用了value属性却没有监听改变事件的时候，就会报错。在警告信息中提醒我们使用defaultValue，因此，当把value换成defaultValue时，就不会阅读全文

posted @ 2018-12-15 10:21 紅葉阅读(467) 评论(0) 推荐(0) 编辑

2018年12月13日

react事件中的事件对象和常见事件

摘要：不管是在原生的js还是vue中，所有的事件都有其事件对象，该事件对象event中包含着所有与事件相关的信息，在react中，所有的事件也有其事件对象，在触发DOM上的某个事件时，就会产生一个事件对象。在开始前，先按照之前创建项目的方法新建一个项目，然后对项目目录进行整理，并新建一个组件，在App. 阅读全文

posted @ 2018-12-13 21:27 紅葉阅读(787) 评论(0) 推荐(0) 编辑

2018年12月12日

react事件中的this指向

摘要：在react中绑定事件处理函数的this指向一共有三种方法，本次主要总结这三种方式。项目创建关于项目的创建方法，在之前的文章中有记录，这里不再赘述，项目创建成功后，按照之前的目录结构对生成的项目进行调整，新建一个Home.js组件，并在App.js中引入该组件。 Home.js App.js 基阅读全文

posted @ 2018-12-12 21:32 紅葉阅读(6807) 评论(0) 推荐(0) 编辑

2018年12月11日

vue生命周期

摘要：关于vue中的生命周期，其实在刚开始接触vue的时候就有了解过，但一直都是一知半解的，最近又有用到，所以就借此机会总结一下。项目准备为了简化操作，这里只是总结生命周期函数，所以是直接在App.vue中进行操作的，只是为了需要，在src文件目录下新建了一个components文件夹，用来存放组件，阅读全文

posted @ 2018-12-11 21:16 紅葉阅读(207) 评论(0) 推荐(0) 编辑