小楊.Blog

TypescriptTypeScript简介TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集，而且本质上TypeScript扩展了JavaScript的语法解决JavaScript的“痛点”：弱类型和没有命名空间，导致很难模块化。 TypeScript是JavaScript的超集。 它对JS进行了扩展，向JS中引入了类型的概念，并添加了许多新的特性。 TS代码需要通过编译器编译为JS，然后再交由JS解析器执行。 TS完全兼容JS，换言之，任何的JS代码都可以直接当成JS使用。 相较于JS而言，TS拥有了静态类型，更加严格的语法，更强大的功能；TS可以在代码执行前就完成代码的检查，减小了运行时异常的出现的几率；TS代码可以编译为任意版本的JS代码，可有效解决不同JS运行环境的兼容问题；同样的功能，TS的代码量要大于JS，但由于TS的代码结构更加清晰，变量类型更加明确，在后期代码的维护中TS却远远胜于JS。 为什么要用TypeScript开源 简单TypeScript 是 JavaScript 的超集，这意味着他支持所有的 Jav ...

HOOKreact HOOK 是react16.8新增的一个特性 主要作用 就是让无状态组件/函数组件 可以使用状态 ref等一些特性 HOOK 不能在 class组件中使用 类组件与函数组件的区别无状态组件 的创建比类组件的可读性更好 就是大大减少了组件编写代码量 在组件内容只有一个jsx编写效率更高 函数组件中不用this 因为函数组件没有实例化的过程 useStateuseState 是reactHOOK给我们提供的 最基本最常用的一个HOOK 主要作用就是用来管理当前本地的状态 useState() 返回值是一个数组（长度为2）数组的第一项标识的是当前的值 数组的第二项标识的时候修改这个值的函数 let [xiaoming , setXiaoming]=useState(初始值) 创建与读取 123456789101112import {useState} from "react"let Funcom=()=>{ // 使用useState()c创建函数组件的状态 ...

1.React介绍7 表单中的受控组件与非受控组件非受控组件受控组件HOC高阶组件在React组件的构建过程中，常常有这样的场景，有一类功能需要被不同的组件公用。（vue中使用mixins） HOC不仅仅是一个方法，确切说应该是一个组件工厂，获取低阶组件（功能较少），生成高阶组件（添加多个组件复用的功能） HOC–参数是组件同时返回值也是组件 高阶组件（HOC）是 React 中用于重用组件逻辑的高级技术。 HOC 本身不是 React API 的一部分。 它们是从 React 构思本质中浮现出来的一种模式。 例子： 比如在多个函数中我们都想使用一个相同的方法。这个方法就是自动发出一段异步请求 并且把请求成功的数据赋值给一个state在页面展示。 那么传统方式我们就需要把这个请求在每个组件中都是用一次 组件少了可以。但是组件变多就很麻烦 那么我们就需要想办法解决这个重复的代码 所以我们可以使用HOC来进行组件中公共内容的复用 大家发现下面的例子 这个请求可能会在多个组件都要使用 那么我们可以把他设置成一个HOC 12345678910111213141516171819202122 ...

1.React介绍扩展—–强制刷新强制触发render渲染 12345678910111213141516171819202122232425import React, { Component } from 'react'export default class demob extends Component { constructor(){ super() this.xiaoming="你好" } fun=()=>{ this.xiaoming="你坏" console.log(this.xiaoming) // 我们可以强制触发render重新渲染页面 this.forceUpdate() } render() { return ( <> <h1>强制刷新</h1> ...

1.React介绍多行html 空标签在react的组件中多行html必须有一个父容器包裹 所以通常我们使用div来进行包裹 但是有的时候这些div是多余的 会在页面生成很多无用的代码 1234567891011121314151617181920212223import React from 'react'import ReactDOM from 'react-dom'class Demob extends React.Component { render() { return ( // 多行标签必须有一个父容器包裹 <div> <h1>你好我是一个标签</h1> <h1>你好我是一个标签</h1> <h1>你好我是一个标签</h1> <h1>你好我是一个标签&l ...

1.React介绍1.React起源与发展React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决 定自己写一套，用来架设Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源 了。 2.React与传统MVC的关系轻量级的视图层库！ React不是一个完整的MVC框架，最多可以认为是MVC中的V（View），甚至React并不非常认可MVC开 发模式；React 构建页面 UI 的库。可以简单地理解为，React 将界面分成了各个独立的小块，每一个块 就是组件，这些组件之间可以组合、嵌套，就成了我们的页面。 3.React的特性1.高效 2.性能好 3.单向数据流4.组件化 4.虚拟DOM2.cra（create-react-app）近期 create-react-app更新了 他里面对node的版本有要求了 node的版本不能低于14了 注意:win7系统node的版本不能大于12 (需要更新系统) 安装1.全局安装create-react-app 1npm insta ...

PHP第一个HelloWorld * PHP的简单了解 * 文件扩展名 php * 代码写在与 ?>之间 * PHP代码每句话以分号结束 * PHP的注释: 单行用 // 或 # /内容/ 多行用 /**/ 1234如：<?php echo hello,world;?> PHP语法变量 php中，定义一个变量要以$符号打头，变量名区分大小写 php的变量的数据类型，是变化的，php变量的数据类型是由运行时的上下文决定 字符串的连用 1echo "Hello World" . "<br>" . "小杨"; if语句 123456789$a = 123;$b = 456;    $c;if($a>$b){     $c = $a;  }else{     $c = $b;    }echo $c; 数组及遍历循环 1234$arr = Array(6,7,8,9,4,6) ...

node.js什么是nodejsnodejs是一个基于chrome 浏览器的js解析器v8 （就是谷歌浏览器中内置的一个js翻译器）所推出的一个js运行环境 nodejs 是一个js的运行环境 同时nodejs可以在任何操纵系统上面进行运行 从而带来了js可以在脱离浏览器的情况下在任何操纵系统上单独运行 js缺点： 就是不能读取本地计算机硬盘上的内容（js就不能操纵本地计算机硬盘上的内容 在开发中 数据库是在硬盘上存储的 所以默认情况下js也不能操纵数据库） 但是 有利node之后 就可以让js来在node的环境下访问本地计算机硬盘上的内容 node环境下js也可以操纵数据库 那么我们前端的开发者就可以使用我们熟练的js 来编写后台 从而完成前后台数据库的操纵 node特点单线程 就是每个用户连接的时候 都会使用一个进程 所有的操作都在这一个进程中继续流动 单线程可以把计算机的硬件利用率达到100% 不会造成浪费 非阻塞式io node在访问高io的情况下 不会进行等待 而是继续向下执行 事件驱动 他会把高io的程序移动到一个事件列队中 等待 ...

组件通信父子组件/组件的嵌套 组件与组件之间是可以相互嵌套 环环相扣 那么这种关系我们就称之为 父子组件 父子组件的作用域 组件与组件之间是一个完整的独立的个体 他们之间的数据默认是不能相互使用 组件通信/组件传值 正向传值–父给子传值–props props是一个属性 他可以接收组件外部的传值 语法:写在 data methods watch computed components 同级 props:[ 接收的变量1,接收的变量2,,,,,,,n] 子组件设置接收 12345678910111213141516171819<template> <div> <!-- 2.使用props这个接受变量 --> zizizizizizzz--{{ziprops}} </div></template><script>export default { // 子组件需要接受父组件的数据 所以在子组件中设置prop ...

ref就是在页面进行dom选择 1.使用ref绑定你要设置的dom 2.使用this.$refs.你要查找的ref名字 1234567891011121314151617181920212223242526<template> <div> <!-- <h1 id="h">ref</h1> --> <!-- 使用ref绑定dom元素 --> <h1 ref="h">ref</h1> <button @click="fun()">点我修改上面的颜色</button> </div></template><script>export default { methods:{ fun(){ // document.getElementById("h") ...