![](https://img-blog.csdnimg.cn/dc1abfda54b04c96a286ee248de1cebc.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
React
文章平均质量分 93
用于记录react学习历程,分析知识和使用react遇到的问题。
小绵杨Yancy
Trouble is a friend.
展开
-
React学习(七)— 路由react-router
和vue一样,react应用也是单页面应用(spa),所以也需要引入路由来控制不同组件的展示和隐藏来实现不同页面的效果,保持UI与URL的同步。函数会返回一个函数,这个函数暂且叫做navigate,名字随意取,navigate用来实现编程导航的跳转。Link和NavLink都可以实现路由跳转,但是NavLink自身存在一个active的类名,可以在里面设置激活之后的样式。我们使用路由组件包含了App组件,所以应该在App组件中配置路由。例如这里,我设置.active类的样式。......原创 2022-07-28 09:00:00 · 1400 阅读 · 0 评论 -
React学习(六)— 状态管理Redux
刚开始你可以只有一个reducer,随着应用变大,你可以把它拆成多个小的reducers,分别独立地操作statetree的不同部分,因为reducer只是函数,你可以控制它们被调用的顺序,传入附加数据,甚至编写可复用的reducer来处理一些通用任务,如分页器。方法发送action,参数就是需要传递的action对象,然后reducer接收到action并处理,返回新的state,视图自动更新。将数组展开然后和新增的todo合并,对象同样可以使用扩展运算符达到新增属性的目的。......原创 2022-07-27 14:46:50 · 1219 阅读 · 0 评论 -
React学习(五)— Hooks
react组件分为类(class)组件和函数(function)组件。class组件是通过继承模版类(Component、PureComponent)的方式开发新组件的,继承是class本身的特性,它支持设置state,会在state改变后重新渲染,可以重写一些父类的方法,这些方法会在React组件渲染的不同阶段调用,叫做生命周期函数。function组件state和类似class组件的生命周期函数的功能,这种api就叫做hooks。灵魂所在。httpshttpshttps。...原创 2022-07-23 09:00:00 · 868 阅读 · 0 评论 -
React学习(四)— 事件处理和表单
右边handleChange方法这个方法是在类的原型对象上的;而使用bind的函数把这个原型对象方法上的this修改成类实例对象上的this,右边的代码执行完成之后生成一个新的函数,然后把这个新函数放到实例的自身上也就是等式的左边,且给这个函数起了一个名字(左边方法名),这样就能解决原型方法上其他方法调用该方法this指向是undefined的问题了。在vue中,可以使用v-model指令实现表单的双向绑定,但是实际上,v-model只是v-bind和v-on的语法糖,在react中,我们可以直接利用。..原创 2022-07-21 19:14:40 · 333 阅读 · 0 评论 -
React学习(三)— React State和生命周期
可以看到,类组件和函数组件在State和生命周期上区别还是非常大的,函数式组件需要调用react提供的hooks(钩子函数,非常重要,后面会专门学习)来实现类组件对于的功能。学习过程中,我发现react类组件类似于vue2的选项式api组件,而函数组件则vue3组合式api十分相似。httpshttpshttps。...原创 2022-07-20 11:35:30 · 302 阅读 · 0 评论 -
React学习(二)— JSX和组件
JSX是全称是()按照React 官方的解释,JSX 是一个 JavaScript 的语法扩展,类似于模板语法,或者说是一个类似于 XML 的 ECMAScript 语法扩展,并且具备 JavaScript 的全部功能。例如:或者:可以看到,定义的element和函数的返回值既不是字符串,也不是变量,而是。JSX 会被编译为 React.createElement(), React.createElement() 将返回一个叫作“React Element”的 JS 对象。JSX与React.cre原创 2022-07-09 12:12:07 · 597 阅读 · 0 评论 -
React学习(一)— 第一个React应用
React是用于构建用户界面的JavaScript库,起源于Facebook的内部项目,该公司对市场上所有 JavaScript MVC框架都不满意,决定自行开发一套,用于架设Instagram的网站。于2013年5月开源。React框架的主要优点:使用react创建web应用有许多种方法,这里使用两种比较流行的方式来创建第一个react应用。在上面的html页面中,我们引入了三个脚本文件,分别是:(1)、react.js,React框架的核心文库。(2)、react-dom.min.js,提供与DO原创 2022-07-08 17:23:24 · 338 阅读 · 0 评论