随笔分类 - react-笔记-笔记-2022
react-笔记-笔记-2022
摘要:app.js import React from "react"; /* * 类组件必须要继承React.Component * 相较于函数组件,类组件的编写要麻烦一下, * 但是他俩的功能是一样的 * */ class App extends React.Component{ // 类组件中,必须
阅读全文
摘要:<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>变量</title> <script> /* * var * - 没有块级作用域 * let * - 有块级作用域 * const * - 和let类似,具有块
阅读全文
摘要:<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>箭头函数</title> <script> /* * 1.箭头函数中没有arguments * 2.箭头函数中没有自己的this * - 它的this总是外层作
阅读全文
摘要:<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>箭头函数</title> <script> /* * 箭头函数 * - 只有一个参数的函数 * 参数 => 返回值 * - 如果没有参数,或多个参数,参数需要使
阅读全文
摘要:<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>展开</title> <script> /* * 可以通过 ... 展开一个数组 * */ function fn(a, b, c) { return a +
阅读全文
摘要:<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>解构赋值</title> <script> // let a, b; let arr = ['孙悟空', '猪八戒']; /* a = arr[0]; b =
阅读全文
摘要:<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>三个API</title> <script src="script/react.development.js"></script> <script src="s
阅读全文
摘要:<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>三个API</title> <script src="script/react.development.js"></script> <script src="s
阅读全文
摘要:<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Hello World</title> <!--引入react的核心库--> <script src="script/react.development.js"
阅读全文
摘要:<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>数组的方法</title> <script> const arr = [1, 2, 3, 4, 5]; /* * map() * - 可以根据原有数组返回一个新
阅读全文
摘要:<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>静态属性</title> <script> /* * 直接通过类调用的属性和方法被称为静态属性和静态方法 * */ class MyClass { // 使用s
阅读全文
摘要:<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>继承</title> <script> // 将多个类中的重复代码提取出来 class Animal{ constructor(name, age) { thi
阅读全文
摘要:<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>类</title> <script> class MyClass{ constructor() { // this.fn = this.fn.bind(this
阅读全文
摘要:<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>类</title> <script> /* * 类 * - 类是对象的模板 * - 类决定了一个对象中有哪些属性和方法 * - 使用class关键字来定义一个类
阅读全文
摘要:app.js const App = () => { return <div>我是App组件!</div> }; // 导出App export default App; index.js /* * 组件 * - React中组件有两种创建方式 * - 函数式组件 * - 函数组件就是一个返回JSX
阅读全文
摘要:主界面 import ReactDOM from 'react-dom/client'; // 引入样式表 import './index.css'; // 创建一个React元素 const App = <div className="logs"> {/* 日志项容器 */} <div class
阅读全文
摘要:index.html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>React项目</title> </head> <body> <div id="root"></div> <!-- public/inde
阅读全文
摘要:<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>虚拟DOM</title> <script src="script/react.development.js"></script> <script src="s
阅读全文
摘要:<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>渲染列表</title> <script src="script/react.development.js"></script> <script src="sc
阅读全文
摘要:<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>JSX的注意</title> <script src="script/react.development.js"></script> <script src="
阅读全文