随笔分类 -  React

摘要:处理css全局作用 现在有这样一个场景: A页面和B页面都有一个相同的类名 我们在A页面中有引入css。 B页面没有css 在我们切换A和B页面的时候。 A页面的css也作用在了B页面。 我们只希望A页面的css不影响B页面。 怎么处理这样的问题了。 可以将css文件变成 xxx.module.cs 阅读全文
posted @ 2022-07-22 12:27 南风晚来晚相识 阅读(513) 评论(0) 推荐(0) 编辑
摘要:在函数中使用定时器 import { useEffect, useState } from "react"; export default function Funcom() { useEffect(() => { setInterval(() => { console.log('我在执行 ') } 阅读全文
posted @ 2022-07-21 17:16 南风晚来晚相识 阅读(221) 评论(0) 推荐(0) 编辑
摘要:学习hooks 在 React 的世界中, 组件有函数组件和类组件 UI 组件我们可以使用函数,用函数组件来展示 UI。 而对于容器组件,函数组件就显得无能为力。 我们依赖于类组件来获取数据,处理数据。 React 在 v16.8 的版本中推出了 React Hooks 新特性。 以前我们更改数据都 阅读全文
posted @ 2022-07-17 22:10 南风晚来晚相识 阅读(1376) 评论(0) 推荐(1) 编辑
摘要:jsx语法的转化过程 jsx仅仅是createElement()方法的语法糖 jsx语法会被 @balel/preset-react插件编译为createElement()方法 组件的更新机制 setState的两个作用 1.修改state 2.更新组件ui 父组件在重新渲染的时候 子组件也会重新渲 阅读全文
posted @ 2022-06-26 13:57 南风晚来晚相识 阅读(61) 评论(0) 推荐(0) 编辑
摘要:setState跟新数据是同步还是异步? setState跟新数据是异步的。 如何用代码表现出来是异步的。 点击按钮更新数据,然后去打印这个值看一下 setState跟新数据是异步的 class Father extends React.Component{ state = { num:0 } ad 阅读全文
posted @ 2022-06-25 10:21 南风晚来晚相识 阅读(1057) 评论(0) 推荐(1) 编辑
摘要:React组件复用 React组件复用的方式有两种: 1.render Props模式 2.高阶组件HOC 上面说的这两种方式并不是新的APi。 而是利用Raect自身的编码特点,演化而来的固定编码写法。 什么是render Props模式 1.把prop是一个函数并且要告诉组件要渲染什么内容的技术 阅读全文
posted @ 2022-06-18 15:37 南风晚来晚相识 阅读(1570) 评论(0) 推荐(0) 编辑
摘要:什么是生命周期? 从出生到成长,最后到死亡,这个过程的时间可以理解为生命周期。 React中的组件也是这么一个过程。 React的生命周期分为三个阶段:挂载期(也叫实例化期)、更新期(也叫存在期)、卸载期(也叫销毁期)。 在每个周期中React都提供了一些钩子函数。 生命周期的描述如下: 挂载期:一 阅读全文
posted @ 2022-06-10 18:48 南风晚来晚相识 阅读(1502) 评论(0) 推荐(0) 编辑
摘要:props中的children属性 组件标签只用有子节点的时候,props就会有该属性; children的属性跟props一样的,值可以是任意值;(文本,React元素,组件,函数) 组件: <ClassCom> 传递的数据 </ClassCom> 这样的组件标签中就会有子节点 props中的ch 阅读全文
posted @ 2022-06-06 11:36 南风晚来晚相识 阅读(573) 评论(0) 推荐(0) 编辑
摘要:React兄弟组件之间的通信 Child2组件需要去更改Child1组件中的数据。 因为Child1和Child2是兄弟组件 所以数据和事件都放在最进的父级组件中去 兄弟组件通信的简单使用 import React from 'react'; //这个是react这个包,我们是需要的 import 阅读全文
posted @ 2022-06-05 22:36 南风晚来晚相识 阅读(1051) 评论(0) 推荐(0) 编辑
摘要:组件中的props 在react中,props的特点是: 1.可以给组件传递任意类型的数据 2.props是只读的对象,只能够读取属性的值,无法修改对象 如过我们强行修改数据,会报错,告诉我们该属性是只读属性。 ps:在类组件中,如果写了构造函数,应该将props传递给super(). 否则无法在构 阅读全文
posted @ 2022-06-05 15:49 南风晚来晚相识 阅读(623) 评论(0) 推荐(0) 编辑
摘要:受控组件 受控组件的步骤: 1.在state中添加一个状态,作为表单元素的value值(控制表单元素值的来源) 2.给表单元素绑定change事件,将表单元素的值设置为state的值(这样就可以控制表单元素值的变化) 受控组件的简单使用 index.js import React from 'rea 阅读全文
posted @ 2022-06-05 12:53 南风晚来晚相识 阅读(184) 评论(0) 推荐(0) 编辑
摘要:有状态组件和无状态组件 函数组件又叫做无状态组件,类组件又叫做有状态组件。 状态又叫做数据 函数组件没有自己的状态,只负责静态页面的展示。 我们可以理解为纯ui展示。() 类组件有自己的状态,扶着更新UI,会让页面动起来. state的基本使用 state就是数据,是组件内部的私有数据。 只能够在组 阅读全文
posted @ 2022-06-05 11:32 南风晚来晚相识 阅读(174) 评论(0) 推荐(0) 编辑
摘要:事件绑定 语法:on +事件名= { ()=>{ do something }} <!-- 点击事件 --> onClick={ () => { } } 注意的是:React采用的是驼峰命名法。 需要注意的是:在类组件中和函数组件中绑定事件是不同的哈 在类组件中绑定事件 <!-- 点击事件 --> 阅读全文
posted @ 2022-06-05 10:52 南风晚来晚相识 阅读(288) 评论(0) 推荐(0) 编辑
摘要:React 创建组件的两种方式 函数组件:使用js函数创建的组件 约定1:函数名称必须以大写字母开头 约定2:函数组件必须要有返回值. 如果返回值为null.表示不渲染任何内容。 return null [什么都不会渲染了] 如果没有return会报错的哈 怎么使用函数组件呢? 直接使用函数名作为组 阅读全文
posted @ 2022-06-05 10:40 南风晚来晚相识 阅读(479) 评论(0) 推荐(0) 编辑
摘要:安装react的脚手架 1==>行 npx create-react-app myreactdemo01 解释一下: npx create-react-app 你的项目名称 npx create-react-app 是固定不变的 2==>然后执行回车 3==>cd myreactdemo01 4== 阅读全文
posted @ 2022-04-01 13:38 南风晚来晚相识 阅读(114) 评论(0) 推荐(0) 编辑
摘要:引入 Redirect 默认展示某一个页面 Switch 一旦找到 路由 就停止 不会在往下找了 阅读全文
posted @ 2019-12-17 23:05 南风晚来晚相识 阅读(1174) 评论(0) 推荐(0) 编辑
摘要:路由的基本使用 下载 npm i -D react-router react-router-dom APP.js ps==>NavLink 选中的时候 可以高亮 demo 是你自己添加的一个类哈 activeClassName 点击的时候 可以高亮显示 import Chuli from "./co 阅读全文
posted @ 2019-12-17 22:57 南风晚来晚相识 阅读(201) 评论(0) 推荐(0) 编辑
摘要:组件的三大属性 state props refs 写组件的要求: 1》组件必须大写 2》组件必须只有一个根元素 state是组件的重要对象 值可以是对象 组件被称之为 状态机 通过跟新组件的 state来对应跟新响应的页面 阅读全文
posted @ 2019-12-17 22:50 南风晚来晚相识 阅读(324) 评论(0) 推荐(0) 编辑
摘要:###05案例 每隔0.2s颜色变淡### ###componentDidMount表示组件已经挂载,可以进行DOM操作### import React, { Component } from "react"; export default class Life extends Component 阅读全文
posted @ 2019-12-17 22:43 南风晚来晚相识 阅读(224) 评论(0) 推荐(0) 编辑
摘要:##案例 每隔0.2s颜色变淡## 公共数据是放在state中的哦! 代码如下 import React, { Component } from "react"; import { setTimeout } from "timers"; export default class Life exten 阅读全文
posted @ 2019-12-17 22:35 南风晚来晚相识 阅读(286) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示