随笔分类 -  React学习笔记

react学习---day05--React生命周期(新)
摘要：对比旧的生命周期,弃用了3个钩子与新增了2个钩子 弃用的函数钩子: 其实也是可以直接使用,但是react会发出警告,因为react准备异步渲染的工程,在此钩子中可能会造成不必要的bug,在未来可能会被弃用;例如: UNSAFE_componentWillMount; 需要加上UNSAFE_ comp 阅读全文
posted @ 2021-01-18 21:29 微笑着的代码狗 阅读(42) 评论(0) 推荐(0)
react学习---day05--React生命周期(旧)
摘要：React的生命周期与Vue的生命周期大同小异 总体分为四个阶段: 初始化阶段: 由ReactDOM.render()触发 初次渲染并只执行一次 constructor 初始化准备,可以缺省constructor componentWillMount 组件挂载之前, 与create差不多 rende 阅读全文
posted @ 2021-01-18 14:42 微笑着的代码狗 阅读(44) 评论(0) 推荐(0)
react学习---day04--高阶函数与函数柯里化
摘要：需求: 还是那个登录功能,但是我现在不想一直执行e.target.value这句代码,假设我有十个输入框那我就需要写十句这样的代码 可以将saveUserName与savePassWord写成一个方法,只需要将他们的标识作为一个参数传入进去 1 <input onChange={this.savaF 阅读全文
posted @ 2021-01-14 19:49 微笑着的代码狗 阅读(106) 评论(0) 推荐(0)
react学习---day03--受控组件与非受控组件
摘要：先根据需求完成代码: 需要有个登录的功能,点击登录时弹出该输入框对应的值 利用ref可以这样写: 1 class App extends React.Component { 2 // 创建ref容器 3 userName = React.createRef() 4 passWord = React. 阅读全文
posted @ 2021-01-13 18:01 微笑着的代码狗 阅读(90) 评论(0) 推荐(0)
react学习---day03--React的事件处理
摘要：(1).通过onXxx属性指定事件处理函数 a.React使用的自定义(合成)事件,并不是使用原生的DOM事件 > 为了更好的兼容性 b.React中的事件是通过事件委托的方式处理的(委托给组件的最外层的元素: 即id为app的div) > 为了高效 (2).通过event.target得到发生事件 阅读全文
posted @ 2021-01-12 21:54 微笑着的代码狗 阅读(72) 评论(0) 推荐(0)
react学习---day03--refs的使用
摘要：感觉与vue2.x的ref是一样的 1.首先使用字符串形式的ref 需求: 我需要两个input框一个是点击按钮时弹出输入值,一个是失去焦点时弹出输入值 1 class App extends React.Component { 2 showData1 = () => { 3 // 为了this可以 阅读全文
posted @ 2021-01-12 21:25 微笑着的代码狗 阅读(86) 评论(0) 推荐(0)
react学习---day03--限制props的数据
摘要：props让传值变得优雅,但是如果有时我并没有传入该值,我希望有一个默认值(类似于vue的filter) 首先有两个组件的渲染源 <div id="app1"></div> <div id="app2"></div> 然后是render函数 1 class App extends React.Com 阅读全文
posted @ 2021-01-12 15:24 微笑着的代码狗 阅读(169) 评论(0) 推荐(0)
react学习---day03--props传递数据
摘要：react中props就是利用标签的自定义属性进行传值,当多组件使用同一组数据时props可以很优雅的传递数据 <div id="app1"></div> <div id="app2"></div> <div id="app3"></div> 创建了三个div用于组件渲染 1 class App e 阅读全文
posted @ 2021-01-12 10:26 微笑着的代码狗 阅读(111) 评论(0) 推荐(1)
react学习---day02--jsx的语法规则
摘要：react虚拟dom通过diff算法渲染成最终的dom;虚拟don依赖于jsx语法,所以进行react开发需要注意的是jsx的语法规则 定义虚拟DOM是不能写引号(''),因为render函数会认为是字符串 标签中运用JS表达式时要用{} 在jsx中使用class="logo",应该写成classN 阅读全文
posted @ 2021-01-09 16:31 微笑着的代码狗 阅读(85) 评论(0) 推荐(1)
react学习---day01--带方法的组件(计算加减)
摘要：1.开头都是一样的引入react,react-dom以及babel和固定的一些语法 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="widt 阅读全文
posted @ 2021-01-08 17:34 微笑着的代码狗 阅读(392) 评论(0) 推荐(1)
react学习---day01--第一个react组件(渲染列表)
摘要：1.由于是学习需循环渐进,先从最开始的引入文件开始 1 <!-- 该文件向外暴露（导出）了一个对象 React --> 2 <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> 阅读全文
posted @ 2021-01-08 15:35 微笑着的代码狗 阅读(147) 评论(0) 推荐(1)