kilig坚果-优快云博客

原创 React:状态提升案例-烧开水

1.定义Boilingverdict组件function Boilingverdict(props){ if(props.celsius>=100){ return <h1>水烧开了</h1> }else{ return <h1>水凉凉</h1> }}export default Boilingverdict2.定义第一个输入框import React from "react"impo

2021-01-13 17:38:53 226

非受控组件：在受控组件中，表单数据由react处理，让表单数据由dom处理，就是非受控组件使用ref从DOM中或许表单数据//点击按钮 Input输入框获得焦点import React from "react"class H extends React.Component{ constructor(){ super() this.myRef = React.createRef()//创建一个ref } handleClick(){

2021-01-07 21:54:02 163

原创 React:select受控

import React from "react"class Selector extends React.Component{ constructor(){ super() this.state = { val:"1" } } handleChange(e){ this.setState({ val:e.target.value }) }

2021-01-07 17:46:20 312

原创 React:受控组件

表单元素的占位符可以使用defaultValuevalue会被react控制=>受控组件受控组件：值被react控制的表单输入元素import React from "react"class G extends React.Component{ render(){ return ( <input type="text" defaultValue="请输入..."/> ) }}export default G

2021-01-06 22:01:24 193

原创 React:列表&keys

import React from "react"class F extends React.Component{ constructor(){ super() this.state = { tnt : ["马嘉祺","丁程鑫","宋亚轩","刘耀文","张真源","严浩翔","贺峻霖"] } } render(){ let {tnt} = this.state let lis

2021-01-06 20:39:49 122

原创 React:运算符

!!""//falseif(str==""){}if(!!str)//react不会将bool值渲染在页面上//index.jsReactDOM.render( <React.StrictMode> <E messages={["马嘉祺","丁程鑫","宋亚轩","刘耀文","张真源","严浩翔","贺峻霖"]} /> </React.StrictMode>, document.getElementById('root'));//

2021-01-06 19:48:13 574

原创 React:toggle案例

import React from "react"const html1 = <h1>尊敬的VIP会员，您好</h1>const html2 = <h1>你我本无缘，全靠你花钱</h1>class D extends React.Component{ constructor(){ super() this.state = { isCharge:true } }

2021-01-06 17:54:51 420

原创 React:阻止组件渲染

使用return nullReactDOM.render( <React.StrictMode> <C flag={false}/> </React.StrictMode>, document.getElementById('root'));import React from "react"class C extends React.Component{ render(){ if(this.props.flag){

2021-01-05 19:34:15 668 1

原创 React:注册事件

this丢失一般会指向window,在class中如果this丢失会指向undefined使用class时，里面会默认使用严格模式import React from "react"class B extends React.Component{ constructor(){ super() //第三种方法需要用这种方式绑定this this.handleClick2 = this.handleClick2.bind(this) t

2021-01-04 21:52:35 288

原创 React:阻止默认事件

在html页面中直接通过return false即可阻止默认事件<a href="#" onclick="alert('阻止跳转');return false">点击</a>而在react中需要使用e.preventDefault()function PreventDe(){ return ( <a href="#" onClick={(e)=>{ console.log("阻止跳转"); e

2021-01-04 21:20:57 1765

原创 React:为什么要传props

render函数在组件挂载前就会触发import { Component } from "react";import React from "react"class T2 extends React.Component{ constructor(props){ //但是在构造器中无法直接使用，否则是undefined //必须接收props console.log(props.name);//宋亚轩 super() }

2021-01-04 17:33:39 116

原创 React:更新状态三件重要的事

import React,{Component} from "react"class T extends Component{ constructor(props){ super(props) this.state={ name:"宋亚轩", person:{ hobby:"唱歌", sing:"夜空中最亮的星" }

2021-01-04 16:28:14 111

原创 React

ReactReact与Vue的不同之处(重要)1.组件化方面，react使用jsx，一个js文件就是一个组件，而vue使用的是单文件组件2.数据流方面，react完全遵循单向数据流的原则，vue理论上也是单向数据流，但是没有react严格，vue是可以双向数据绑定的3.语法方面，react使用jsx4.vue是响应式编程，react是函数式编程5.两者的diff算法不同，react用的算法是fiber(vue3.0)算法比react快6.在react中，有纯函数的概念7.vue是一个渐进式的

2020-12-28 20:47:06 424

原创 Vue

VueBEM命名规范_元素–修饰符例如：<div class="article"> <div class="body"> <button class="button-error">点击</button> <button class="button-success">点击</button> </div></div>.article__body--button-success{}何时使用B

2020-12-22 21:45:10 105

原创 RegExp正则表达式

RegExp是Regular Expression的缩写正则表达式是用于查找符合某些规则的字符串的工具正则的创建1.构造函数式创建let reg=new RegExp(smallStr,"g");2.字面量式创建let reg = /smallStr/g正则对象的属性g：全局i：忽略大小写m：多行lastIndex：下一次匹配的字符的位置正则对象的方法test()：测试方法，测试是否符合，返回true/falseexec()：搜索方法，查找符合条件的字符，找到就返回结果，否则

2020-12-22 15:32:58 193

原创 HTML5标签

HTML5标签article：定义网页主体部分aside：定义网页侧边部分audio：音频canvas：画布，可以绘制图形command：定义按钮，必须menu元素中datalist：定义input可能的值details：定义文章细节部分embed：定义嵌入的内容，比如图片、视频、网页、插件等figcaption：在figure标签中，用于定义图片的标题figure：定义独立的流内容，比如图片，图表，代码等footer：定义网页底部header：定义网页头部hgroup：用于对标

2020-12-19 15:14:20 201 1

原创 JQuery的选择器

JQuery的选择器一、层级选择器1.后代选择器 <form action=""> <input type="text"> </form> $("form input").click(function(){ console.log("input"); })2.子元素选择器//子元素选择器 $("ul>li").css("color","pink")后代选择器和子元素选择器的区

2020-12-09 14:48:17 192

qq_45922461的博客