随笔分类 - React
摘要：一、todoList案例相关知识点 1.拆分组件、实现静态组件，注意：className、style的写法 2.动态初始化列表，如何确定将数据放在哪个组件的state中？ ——某个组件使用：放在其自身的state中 ——某些组件使用：放在他们共同的父组件state中（官方称此操作为：状态提升） 3.
阅读全文
摘要：安装第三方库 npm install pubsub-js 使用时导入库 import PubSub from 'pubsub-js'; 例子： 订阅 import React, { Component } from 'react'; import PubSub from 'pubsub-js'; i
阅读全文
摘要：方法一 在package.json中追加如下配置： "proxy":"http://localhost:5000" 说明： 1. 优点：配置简单，前端请求资源时可以不加任何前缀。2. 缺点：不能配置多个代理。3. 工作方式：上述方式配置代理，当请求了3000不存在的资源时，那么该请求会转发给5000
阅读全文
摘要：React组件复用概述 处理方式：复用相似的功能(联想函数封装) 复用：1.state 2.操作state的方法(组件状态逻辑) 两种方式：1.render props模式 2.高阶组件（HOC） 注意：这两种方式不是新的API，而是利用React自身特点的编码技巧，演化而成的固定模式（写法） re
阅读全文
摘要：意义：组件的生命周期有助于理解组件的运行方式、完成更复杂的组件功能、分析组件错误原因等 组件的生命周期：组件从被创建到挂载到页面中运行，再到组件不用时卸载的过程 生命周期的每一个阶段总是伴随着一些方法调用，这些方法就是生命周期的钩子函数 钩子函数的作用：为开发人员在不同阶段操作组件提供了时机 只有类
阅读全文
摘要：1. children属性 children属性：表示组件标签的子节点。当组件标签有子节点时，props就会有该属性 children属性与普通的props一样，值可以是任意值(文本、React元素、组件，甚至是函数) //1. 导入react import React from 'react';
阅读全文
摘要：作用：跨组件传递数据(比如：主题、语言等) 使用步骤： 1. 调用React.createContext()创建Provider(提供数据)和Consumer(消费数据)两个组件。 2. 使用Provider组件作为父节点 3. 设置value属性，表示要传递的数据 4. 使用Consumer组件接
阅读全文
摘要：组件之间通讯分为3种： 1. 父组件 -> 子组件 2. 子组件 -> 父组件 3. 兄弟组件 父组件传递数据给子组件 1. 父组件提供要传递的state数据 2. 给子组件标签添加属性，值为state中的数据 3. 子组件中通过props接收父组件中传递的数据 //1. 导入react impor
阅读全文
摘要：组件是封闭的，要接收外部数据应该通过props来实现 props的作用：接收传递给组件的数据 传递数据：给组件标签添加属性 接收数据：函数组件通过参数props接收数据，类组件通过this.props接收数据 //1. 导入react import React from 'react'; impor
阅读全文
摘要：案例：需求分析 1. 渲染评论列表 (列表渲染) 2. 没有评论数据时渲染：暂无评论 (条件渲染) 3.获取评论信息，包括评论人和评论内容 (受控组件) 4. 发表评论，更新评论列表(setState()) 案例：实现步骤 1. 渲染评论列表 1. 在state中初始化评论列表数据 2. 使用数组的
阅读全文
摘要：使用一个事件处理程序同时处理多个表单元素 多表单元素优化步骤： 1. 给表单元素添加name属性，名称与state相同 2. 根据表单元素的类型获取对应的值 3. 在change事件处理程序中通过[name]来修改对应的state //1. 导入react import React from 're
阅读全文
摘要：1.受控组件 HTML中的表单元素是可输入的，也就是有自己的可变状态 而，React中可变状态通常保存在state中，并且只能通过setState()方法来修改 React将state与表单元素值value绑定到一起，由state的值来控制表单元素的值 受控组件：其值受到React控制的表单元素 步
阅读全文
摘要：将逻辑抽离到单独的方法中，保证JSX结构清晰 事件绑定this指向 1.箭头函数 利用箭头函数自身不绑定this的特点 //1. 导入react import React from 'react'; import ReactDOM from 'react-dom'; /* 从JSX中抽离事件处理程序
阅读全文
摘要：1.state的基本使用 状态(state)即数据，是组件内部的私有数据，只能在组件内部使用 state的值是对象，表示一个组件中可以有多个数据 //1. 导入react import React from 'react'; import ReactDOM from 'react-dom'; /*
阅读全文
摘要：函数组件又叫做无状态组件，类组件又叫做有状态组件 状态(state)即数据 函数组件没有自己的状态，只负责数据展示(静) 类组件有自己的状态，负责更新UI，让页面“动”起来
阅读全文
摘要：1. 事件绑定 语法：on+事件名称={事件处理程序}，比如：onClick={() => {}} 注意：React事件采用驼峰命名法，比如：onMouseEnter、onFocus 类组件： //1. 导入react import React from 'react'; import ReactD
阅读全文
摘要：1. 使用函数创建组件 函数组件：使用JS的函数(或箭头函数)创建的组件 约定1：函数名称必须以大写字母开头 约定2：函数组件必须有返回值，表示该组件的结构 如果返回值为null，表示不渲染任何内容 function Hello() { return ( <div>这是我的第一个函数组件！</div
阅读全文
摘要：1. 行内样式--style <h1 style={{ color:'red', backgroundColor:'skyblue' }}> JSX的样式处理 </h1> 2. 类名--className(推荐) index.js //1. 导入react import React from 're
阅读全文
摘要：如果要渲染一组数据，应该使用数组的map()方法 注意：渲染列表时应该添加key属性，key属性的值要保证唯一 原则：map()遍历谁，就给谁添加key属性 注意：尽量避免使用索引号作为key //1. 导入react import React from 'react'; import ReactD
阅读全文
摘要：场景：loading效果 条件渲染：根据条件渲染特定的JSX结构 可以使用 if/else 或 三元运算 或 逻辑与运算符 来实现 //1. 导入react import React from 'react'; import ReactDOM from 'react-dom'; /* 条件渲染： *
阅读全文
浙公网安备 33010602011771号