React
该专栏会分享一些关于react相关的知识
派大星_study
研究生在读,分享学习日常。(零基础学习后端编程)
展开
-
如何关闭antd pro项目里面的eslint代码检查
找到package.json 文件 删除里面的 "pre-commit": "npm run lint-staged" 这个对象即可。原创 2020-02-05 18:57:02 · 9636 阅读 · 4 评论 -
对于React Hooks的理解
React组件可以分为 类组件 和 函数组件 。类组件具有生命周期、状态,而函数组件却没有。在React 16.8 新出来的Hooks 可以让React函数组件具有状态,并且提供了类似componentDidMount 和 componentDidUpdate 等生命周期方法。栗子????:我们写一个函数组件,如果想要更新它的状态,在 React 16.8版本之前,就得重写成 类组件。在 Rea...原创 2020-02-01 12:00:04 · 516 阅读 · 0 评论 -
React-Hooks实现 componentWillUnmount使用 useEffect的第二个参数和return
销毁组件:import React, { useState,useEffect } from 'react';import {BrowserRouter as Router,Link,Route} from 'react-router-dom'function Index(){ useEffect(()=>{ console.log('Index页面的--来了...原创 2020-01-28 12:33:20 · 13162 阅读 · 3 评论 -
React-Hooks中的useEffect 代替常用生命周期函数
使用(componentDidMount 、componentDidUpdate)生命周期结果如下:关键代码:componentDidMount(){ console.log(`componentDidMount---the count num is ${this.state.count} `) }componentDidUpdate(){ cons...原创 2020-01-28 12:06:17 · 2940 阅读 · 1 评论 -
React-Hooks中的useState多状态声明 需要注意的
多状态声明 需要注意:(1)react是根据useState出现的顺序来确定state的。(2)react-hooks不能出现在条件判断语句中。import React, { useState } from 'react';function ExampleHooks02(){ const [age,setAge] = useState(18); const [sex,se...原创 2020-01-28 11:41:42 · 1025 阅读 · 1 评论 -
React-Hooks实现计数器加法 (附完整代码)
效果展示:使用 class 和 Component的代码:import React, { Component } from 'react'; class Example extends Component{ constructor(props){ super(); this.state={ count:0 }...原创 2020-01-28 11:26:46 · 4022 阅读 · 0 评论 -
vscode里面超好用的react代码编辑插件(附完整的安装使用)
(1)打开vscode,搜索 Simple React Snippets(2)安装完成后使用快捷键测试:SnippetRendersimrImport ReactimrcImport React / ComponentimptImport PropTypesimpcImport React / PureCompnentccClass C...原创 2020-01-27 17:13:25 · 19337 阅读 · 1 评论 -
react中的注意的 className、htmlFor、等
react中的注意的 className、htmlFor、等原创 2020-01-27 16:53:49 · 1377 阅读 · 0 评论 -
react中解析html代码 dangeroutlySetInnerHTML
item的值为: <h2>我是内容内容</h2>vue中解析html代码:v-html = "item"react中解析html代码:dangeroutlySetInnerHTML= {{ __html:item}}原创 2020-01-27 16:36:00 · 304 阅读 · 0 评论 -
react中的列表渲染 + 删除当前项 (附完整代码)
效果展示:代码展示:import React,{Component} from 'react';/** * 增加菜单组件 */class AddMenu extends Component{ constructor(props){ super(props) this.state = { inputVal:'', ...原创 2020-01-27 16:28:52 · 1008 阅读 · 0 评论 -
react中的列表渲染(附完整代码)
import React,{Component} from 'react';/** * 增加菜单组件 */class AddMenu extends Component{ constructor(props){ super(props) this.state = { inputVal:'', list...原创 2020-01-24 12:36:08 · 718 阅读 · 0 评论 -
2020前端面试题之 react
一个简单的react面试题:将下面的jsx语法,写成react语法:return( <div> <ul className="list-li"> <li>JavaScript</li> <li>html</li> </u...原创 2020-01-24 11:58:39 · 6382 阅读 · 0 评论