前端框架_React
文章平均质量分 51
mango660
这个作者很懒,什么都没留下…
展开
-
React04_React Ajax4_消息订阅与发布
4.4 消息订阅-发布机制 兄弟组件之间的通信 github地址 工具库 : PubSubJs 下载 : npm install pubsub-js --save 使用: -- 引入 import PubSub from 'pubsub-js' -- 订阅 this.token = PubSub.subscribe('delete', function(data){}) -- 发布消息 PubSub.publish('delete',data) -- 取消订阅 PubSub.unsubscrib原创 2021-08-01 11:13:11 · 72 阅读 · 0 评论 -
React05_React-Router
5 react-router 5.1 相关理解 SPA的理解: 单页Web应用(single page web application, SPA) 整个页面只有一个完整的页面 点击页面中的连接不会刷新页面,只做页面的局部更新 数据都需要通过ajax请求获取,在前端异步展现 路由的理解 什么是路由 一个路由就是一个映射关系{key : value} key 为路径, value 可能是 function 或 component 路由的分类 后端路由 理解:value 是 function,翻译 2021-08-01 10:33:36 · 206 阅读 · 0 评论 -
React02_组件生命周期5
2.7 组件生命周期 效果 理解 组件对象从创建到死亡会经历特定阶段、 React 组件对象包含一系列钩子函数(生命周期回调函数),在特定的时刻调用。 我们在定义组件时,在特定的生命周期回调函数中做特定的工作。 组件生命周期(旧) 初始化阶段:由ReactDOM.render()触发 — 初次渲染 constructor() componentWillMount() render() componentDidMount() 一般在这个钩子做一些初始化的事,例如:开启定时器原创 2021-08-01 09:44:40 · 115 阅读 · 0 评论 -
React02_函数的柯里化与高阶函数4
2.6 高阶函数_函数柯里化 高阶函数:如果一个函数符合下面2个规范中的任何一个,那该函数就是高阶函数 1. 若A函数,接受的参数是一个函数,那么A就可以成为高阶函数 2. 若A函数,调用的返回值依然是一个函数,那么A就可以称之为高阶函数 3. 常见的高阶函数:Promise、setTimeout、arr.map() 函数的柯里化:通过函数调用继续返回函数的方式,实现多次接收参数最后统一处理的函数编码形式。 // 保存表单数据到状态中 saveFormData = (dataType)=>{原创 2021-08-01 09:16:17 · 58 阅读 · 0 评论 -
React02_收集表单数据3_受控组件与非受控组件
2.5 收集表单数据 效果 定义一个包含表单的组件,输入用户名和密码之后,点击登录有弹框提示 // 创建组件 class Login extends React.Component{ showInfo = (event)=>{ // 阻止表单的提交 event.preventDefault(); const {username, password} = this; alert(`你输入的的用户名是${username.va原创 2021-08-01 09:11:51 · 60 阅读 · 0 评论 -
React02_面向组件编程2.3_组件实例的三大核心属性_refs
2.4 组件实例的三大核心属性3:refs与事件处理 效果 理解 组件内的标签可以定义ref属性来标识自己 编码 字符串形式的ref <input ref="input1" /> 回调形式的ref <input ref={(c)=>{this.input1 = c}} /> 如果ref回调函数是以内联函数的方式定义的,在更新过程中它会被执行两次,第一次传入参数null, 然后第二次会传入DOM元素。这是一位内在每次渲染时会创建一个新的函数实例,所原创 2021-07-29 11:31:40 · 61 阅读 · 0 评论 -
React02_面向组件编程2.2_组件实例的三大核心属性_props
2.3 组件实例的三大核心属性2: props 效果 需求:自定义用来显示一个人员信息的组件 // 1. 创建组件 class Person extends React.Component{ render (){ const {name, age, sex} = this.props; // props是只读的 return ( <ul> <li&原创 2021-07-29 10:38:35 · 62 阅读 · 0 评论 -
React02_面向组件编程2.1_组件实例的三大核心属性_state
2.2 组件实例的三大核心属性1: state 详细版 // 1. 创建组件 class Weather extends React.Component{ // 构造器调用几次? —— 几个Weather实例,调用几次 1 constructor(props) { console.log('constructor'); super(props); // 初始化状态 this.state = { i原创 2021-07-29 10:24:09 · 51 阅读 · 0 评论 -
React02_面向组件编程1_函数式组件_类式组件
2 面向组件编程 2.1 两类组件 1. 函数式组件——适用于简单组件 简单组件——无state // 1. 创建函数式组件——首字母大写 function Demo(){ console.log(this); // undefined // babel翻译完开启严格模式,所以为 undefined return <h2>我是用函数定义的组件(适用于简单组件的定义)</h2> } // 函数调用: Demo() // 2. 渲染组件到页面——react调原创 2021-07-29 10:10:34 · 76 阅读 · 0 评论 -
react脚手架配置代理总结
react脚手架配置代理总结 方法一 在package.json中追加如下配置 "proxy":"http://localhost:5000" 说明: 优点:配置简单,前端请求资源时可以不加任何前缀。 缺点:不能配置多个代理。 工作方式:上述方式配置代理,当请求了3000不存在的资源时,那么该请求会转发给5000 (优先匹配前端资源) 方法二 第一步:创建代理配置文件 在src下创建配置文件:src/setupProxy.js 编写setupProxy.js配置具体代理规则: const翻译 2021-07-22 16:55:13 · 44 阅读 · 0 评论 -
React01_入门
React 文章目录React1 React入门1.1 React简介1.2 React基本使用1.3 JSX1.3_补充1.4 模块与组件、模块化与组件化的理解 是什么? 用于构建用户界面的JavaScript库 - 发送请求获取数据 - 处理数据 - 操作DOM呈现页面(react自行处理) 是一个将数据渲染为HTML视图的开源JavaScript库 谁开发的? 由Facebook开发,且开源。 Instagram??? 为什么要学? 原生JavaScript操作DOM繁琐、效原创 2021-07-18 21:31:11 · 77 阅读 · 2 评论