自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(13)
  • 收藏
  • 关注

原创 JS(v8)垃圾回收机制

GC是什么GC 即 Garbage Collection ,程序工作过程中会产生很多 垃圾,这些垃圾是程序不用的内存或者是之前用过了,以后不会再用的内存空间,而 GC 就是负责回收垃圾的,它工作在引擎内部,对于我们前端来说,GC 过程是相对比较无感的。不是所有语言都有 GC,一般的高级语言里面会自带 GC,比如 Java、Python、JavaScript 等,也有无 GC 的语言,比如 C、C++ 等,那这种就需要我们程序员手动管理内存了,相对比较麻烦。JavaScript 自动垃圾收集机制编

2021-11-23 13:32:33 2698

原创 react 组件的生命周期

react 组件的生命周期意义︰组件的生命周期有助于理解组件的运行方式、完成更复杂的组件功能、分析组件错误原因等组件的生命周期 ︰组件从被创建到挂载到页面中运行,再到组件不用时卸载的过程生命周期的每个阶段总是伴随着一些方法调用,这些方法就是生命周期的钩子函数。钩子函数的作用︰为开发人员在不同阶段操作组件提供了时机。只有 类组件 才有生命周期。生命周期的三个阶段每个阶段的执行时机每个阶段钩子函数的执行顺序每个阶段钩子函数的作用import React from "react"

2021-11-30 15:20:57 222

原创 react 中 props 校验

props1. children 属性children 属性∶表示组件标签的子节点。当组件标签有子节点时,props 就会有该属性children属性与普通的props一样,值可以是任意值(文本、React元素、组件,甚至是函数)children 使用方法示例:import React from "react";import ReactDOM from "react-dom";import './index.css'// children 属性const App = prop

2021-11-29 16:14:18 300

原创 react 中的 Context

思考:App 组件要传递数据给 Child 组件,该如何处理?处理方式:使用props一层层组件往下传递(繁琐)Context 作用:跨组件传递数据(比如:主题、语言等)使用步骤∶调用 React. createContext() 创建 Provider (提供数据) 和 Consumer(消费数据) 两个组件使用 Provider组件 作为父节点...

2021-11-29 14:36:45 333

原创 react 组件通讯的三种方式

父组件传递数据给子组件父组件提供要传递的 state 数据给子组件标签添加属性,值为 state 中的数据子组件中通过 props 接收父组件中传递的数据class Parent extends React.Component { state = { lastName: '王' } render() { return( <div style={{background:'red', padding:'20px'

2021-11-26 17:30:31 113

原创 react 组件中的 props

组件的props组件是封闭的,要接收外部数据应该通过 props 来实现props 的作用:接收传递给组件的数据传递数据:给组件标签添加属性接收数据︰函数组件通过 参数props接收数据,类组件通过 this.props 接收数据函数组件传值方式// propsconst Hello = (props) => { // props 是一个对象 const { name, age } = props return( <div>

2021-11-26 14:41:31 1014

原创 react 表单 demo 代码练习

敲个demo:state、事件、表单的综合运用事件的复用封装对象属性的灵活取值 [属性(变量)]解构赋值的使用扩展运算符的使用import React from "react";import ReactDOM from "react-dom";import './index.css'// 抽离组件到独立的 JS 文件中class App extends React.Component { state = { comments: [

2021-11-26 11:01:17 631

原创 react 表单处理

受控组件HTML中的表单元素是可输入的,也就是有自己的可变状态而,React中可变状态通常保存在state中,并且只能通过setState()方法来修改React将state 与表单元素值value绑定到一起,由state的值来控制表单元素的值步骤:在state中添加一个状态,作为表单元素的value值(控制表单元素值的来源)给表单元素绑定 change 事件,将表单元素的值设置为 state 的值(控制表单元素值的变化)输入框举例:class App extends React

2021-11-24 21:56:09 320

原创 react 中 state 的基本使用

有状态组件和无状态组件函数组件又叫做 无状态组件,类组件又叫做 有状态组件状态( state )即 数据函数组件没有自己的状态,只负责数据展示(静)类组件有自己的状态,负责更新Ul,让页面“动”起来比如计数器案例中,点击按钮让数值加1。0和1就是不同时刻的状态,而由0变为1就表示状态发生了变化。状态变化后,UI也要相应的更新。React中想要实现该功能,就要使用有状态组件来完成。state的基本使用状态( state )即数据,是组件内部的私有数据,只能在组件内部使用state的值是

2021-11-24 17:46:06 3293

原创 react 的事件绑定和事件对象

事件绑定React 事件绑定语法与 DOM 事件语法相似语法:on+事件名称={事件处理程序},比如:onClick={0 => {}}注意:React事件采用 驼峰命名法 ,比如:onMouseEnter、onFocus类组件class App extends React.Component { handleClick() { console.log('单击事件触发啦~') } render() { return(

2021-11-24 15:24:48 594

原创 React 组件的两种创建方式

使用函数创建组件函数组件∶使用 JS 的函数(或箭头函数)创建的组件函数组件必须有返回值,表示该组件的结构,如果返回值为 null,表示不渲染任何内容组件名称必须以大写字母开头,React 据此区分组件和普通的 React 元素使用 函数名 作为组件标签名function Hello() { return ( <div>这是我的第一个函数组件</div> )}// 使用箭头函数创建组件// const Hello = () => <d

2021-11-23 21:06:25 452

原创 JSX的基本使用

JSX的基本使用JSX 是 JavaScript XML 的简写,表示在 JavaScript 代码中写 XML ( HTML)格式的代码优势:声明式语法更加直观、与 HTML 结构相同,降低了学习成本、提升开发效率使用步骤使用 JSX 语法创建 react 元素const title = <h1> hello JSX </h1>使用 ReactDom.render() 方法渲染 react 元素到页面中ReactDom.render(title, root

2021-11-23 14:52:09 376

原创 react.js的使用

建 index.html 文件命令行 npm init 生成 packge.json 文件命令行 npm i react react-dom引入react、react-dom,创建 react 元素, 渲染 react 元素<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wi.

2021-11-23 11:11:43 444

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除