![](https://img-blog.csdnimg.cn/20200110091333377.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
React
文章平均质量分 95
React
yingjieweb
踏踏实实学点前端
展开
-
React 入门笔记
React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架都不满意,就决定自己写一套,用来架设 Instagram 的网站,也就有了 React 🎉React 被开发出来之后,大家发现这套东西很好用,就在 2013 年 5 月开源了。由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单。所以越来越多的人开始关注和使用,现如今已是和 Vue 并肩的最热的两个前端框架之一 🚩原创 2020-04-14 18:16:44 · 236 阅读 · 0 评论 -
JSX 的基本使用
通过上一篇博客的 +1 个小应用,我们能体会到,和 Vue 相比代,用 React 写一个这么小的应用比较麻烦,而且代码比较混乱。接触过 Vue 的开发者应该知道,Vue 有两个构建版本,如果单独使用非完整版其实和上述用 React 实现 +1 的小应用相比并不会有多大优势,也就多一个视图自动刷新的便捷性。但是 Vue 非完整版可以配合 vue-loader,这使得开发人员...原创 2020-04-14 20:47:56 · 2103 阅读 · 1 评论 -
React 类组件和函数组件
1、元素 vs 组件和 Vue 一样,在 React 的开发中也是强调组件化的,但是 React 中的组件和 Vue 中的组件还是略有不同的。在 Vue 中,一个构造选项(el,data,methods...)就可以表示为一个组件,而对 React 来说,能够返回一个 React 元素的函数就叫组件。const div = React.createElement('div',...)...原创 2020-04-15 09:09:57 · 1830 阅读 · 0 评论 -
React 内部数据 state v.s. 外部数据 props
目录1、添加外部数据 props2、使用内部数据 state3、使用类组件的注意事项1、添加外部数据 props和 Vue 类似,React 的组件之间也需要进行传值。父组件需要在子组件的占位符上通过赋值的形式将值传递给子组件,子组件通过 props 属性拿到父组件传递的值,但是函数组件和类组件在使用外部数据时会有所不同:类组件可以直接通过 this.props...原创 2020-04-15 17:44:26 · 555 阅读 · 0 评论 -
关于类组件事件绑定的 this 问题
在类组件中,绑定事件(onClick、onKeyPress等)的方式有以下几种,其中比较保险和推荐的还是使用箭头函数 ()=> { } 的方式。如果你觉的箭头函数的写法太长,可以看一下下面这几种改进的方式:<button onClick = { () => this.addN() } >n+1</button> <!--传一个函数给onClick即可...原创 2020-04-16 10:27:47 · 538 阅读 · 0 评论 -
React 和 Vue 的不同编程模型
目录1、Vue 的编程模型2、React 的编程模型3、两个框架的不同理念1、Vue 的编程模型接触 Vue 的开发者应该都知道,在 Vue 中一旦内部数据改变了,视图就会随之更新,这是因为 Vue 的数据响应式原理:Vue 对其构造选项 options 的 data 中的数据进行了篡改并监听,一旦监听数据发生变化,Vue 就会去刷新视图。在 Vue 的编程模型中,一...原创 2020-04-15 18:03:52 · 255 阅读 · 0 评论 -
React 类组件的生命周期
React 类组件的 constructor()生命周期,主要用途是初始化 props、初始化 state、绑定 this。若该类组件只需要初始化 props ,则 constructor 可以不写。如果 constructor 中需要写其他东西,比如:声明state、绑定 this,则 constructor 不能省略。原创 2020-04-17 16:24:23 · 3919 阅读 · 0 评论 -
React 函数组件详解
1、创建函数组件方式相比类组件其实更提倡使用函数组件,因为它在很多操作上都是很便捷的,比如说没有 this。创建函数组件的方式如下:const Hello = (props) => { <!--箭头函数的形式--> return <div>{ props. message}</div>}const Hello = props =...原创 2020-04-17 18:10:27 · 4789 阅读 · 0 评论 -
封装 useUpdate 钩子
上一篇博客里面提到了,函数组件在模仿类组件的生命周期钩子时,需要使用 React 推出的 useEffect() 方法,这个方法接收两个参数,第一个是要执行的函数,第二个参数是空,或一个数组,表示函数的调用时机。基于 useEffect() 方法我们可以模仿类组件的大部分生命周期钩子,但是有一个不行,就是 componentDidUpdate()。之所以不能模仿类组件的 componentDi...原创 2020-04-17 20:08:31 · 1062 阅读 · 0 评论 -
useState() hook 的原理解析
1、useState 简单描述我们通过最简单 +1 操作来分析一下函数组件的 useState() 工作原理。该应用的具体代码如下,使用 useState(0) 声明一个初始值为 0 的变量,该方法返回一个数组,数组的第一项为变量 n 的读标识,通过 {n} 的方式可以对其进行读取。数组的第二项为变量 n 的写方法,通过 setN(n+1) 可以对变量 n 进行 +1 操作。import...原创 2020-04-18 11:18:57 · 6283 阅读 · 0 评论