麟玖Sam

React 基础-组件通讯-类组件01. 组件通讯概述 目标：掌握什么是组件通讯 对于不同的组件而言，组件通讯是指数据能够在不同的组件之间进行流动。 在使用组件构建用户界面时，我们会将一个完整的页面拆分为若干个独立的小的组件，这些组件在完成不同任务时通常需要协同工作，比如多个组件需要用到相同的数据，因此组件之间必须能够相互通信，即在不同的组件之间传递数据。 组件通讯包含父子通讯、兄弟通讯、远房亲戚通讯。 对于同一个组件而言，组件通讯可以实现差异化复用组件。 02. 组件通讯基础 目标：掌握在组件外部向组件内部传递数据的方式、掌握在组件内部获取外部传递进来的数据的方式 在调用组件时通过属性的方式向组件内部传递数据。 // src/App.js import React from "react"; import Person from "./Person"; export default class App extends React.Component { render() { return...

javascript高级this指向与严格模式1.this指向问题 情况一function创建对象时，this指向window 情况二字面量定义成对象里的函数，this指向object(调用对象) var o = { fn:function () { console.log(this) } } o.fn() // 控制台输出Object{对象内容} 情况三绑定事件方法中的this 指向的是绑定事件的元素(对象) // btn按钮点击时 var btn = document.querySelector('button') btn.addEventListener('click',function(){ console.log(this) // 控制台输出btn(按钮元素对象) }) 情况四定时器中的this 指向window var timeId...

React 基础-组件-类组件01. 组件概述 目标：了解 React 组件的作用和创建组件的方式 什么是组件 组件设计思想 1. 什么是组件在前端开发中组件就是用户界面当中的一块独立的区域，在组件内部会包含这块区域中的视图代码、样式代码以及逻辑代码。 React 采用组件的方式构建用户界面，通过将多个组件进行组合形成完成的用户界面，就像搭积木。 2. 组件设计思想组件的核心思想之一就是复用，定义一次到处使用。 组件可以用来封装用户界面中的重复区块，复用重复区块。 组件的另外一个核心思想是解耦。 在传统的 web 页面开发中，一个 html 文件就是一个页面，就是说当前页面中的所有代码都被写在了同一个文件中，这就很容器导致代码的冲突。 在组件化开发中，每个组件都有自己的作用域，组件与组件之间的代码不会发生冲突，从而避免在传统开发模式中经常出现的改A坏B的问题。 02. 创建组件 目标：掌握创建类组件的方式 import ReactDOM from "react-dom/client"; import { Component...

React 基础 - JSX01. React 概述 目标：了解 React 是什么 官方文档(英文)、官方文档(中文)、官方文档(新版、开发中、英文) 官方释义：A JavaScript library for building user interfaces ( 一个用于构建用户界面的 JavaScript 库 )。 React 是一个开源的 JavaScript 库，用于构建 web 应用中的视图层，就是 web 应用中的前端用户界面。 React 是目前最为流行的前端框架之一。 https://npmtrends.com/angular-vs-react-vs-vue https://trends.google.com/trends/explore?q=react,vue,angular React 是由 Facebook 的软件工程师在 2012 年创建，于 2013 年 5 月开源，目前由 Facebook 以及个人开发人员和公司组成的社区维护。 React 起源于 Facebook 的内部项目，因为当时该公司对市场上所有 JavaScript...