![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react学习
南才
这个作者很懒,什么都没留下…
展开
-
React脚手架项目中的小tips
1.引入css可以模块化 注意文件命名,如xxx.module.css2.配置多个代理需要在src下新建一个固定名字的文件夹该文件里的代码写法如下:const proxy = require("http-proxy-middleware")module.exports = function(app){ app.use( proxy('/api1',{ target:"http://localhost:500...原创 2021-07-03 21:03:17 · 117 阅读 · 1 评论 -
React学习(从零基础到精通)00011001
DOM的Diffing算法<script type="text/babel"> /* 1). react/vue中的key有什么作用?(key的内部原理是什么?) 2). 为什么遍历列表时,key最好不要用index? 1. 虚拟DOM中key的作用: 1). 简单的说: key是虚拟DOM对象的标识, 在更新显示时key起着极其重要的作用。 2). 详细的说: 当状态中的数据发生变化时,react会根据【新数据】生成【新原创 2021-06-14 22:58:17 · 138 阅读 · 2 评论 -
React学习(从零基础到精通)00011000
getSnapshotBeforeUpdate钩子的使用场景<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>getSnapshotBeforeUpdate的使用场景</title> <style> .list{ width: 200px; h原创 2021-06-14 22:55:55 · 147 阅读 · 1 评论 -
React学习(从零基础到精通)00010111
react生命周期(新) <script type="text/babel"> /* 1. 初始化阶段:由ReactDOM.render()触发----初次渲染 1.contructor() 2.getDerivedStateFromProps() 3.render()原创 2021-06-14 22:53:38 · 68 阅读 · 0 评论 -
React学习(从零基础到精通)00010101
2. react生命周期(旧) /* 1. 初始化阶段:由ReactDOM.render()触发----初次渲染 1.contructor() 2.componentWillMount() 3.render() 4.componentDidMount() =====》常用,原创 2021-06-14 22:50:39 · 93 阅读 · 0 评论 -
React学习(从零基础到精通)00010100
React组件的生命周期1. 引出生命周期 <script type="text/babel"> //生命周期回调函数===生命周期钩子函数====生命周期函数====生命周期钩子 class Life extends React.Component{ state = { opacity:1 } death = ()=>{原创 2021-06-13 08:56:09 · 100 阅读 · 0 评论 -
React学习(从零基础到精通)00010011
不用函数柯里化的实现 <script type="text/babel"> //#region /* 高阶函数:如果一个函数符合下面2个规范中的任何一个,那该函数就是高阶函数 1. 若A函数,接收的参数是一个函数,那么A就可以称之为高阶函数 2. 若A函数,调用的返回值依然是一个函数,那么A就可以称之为高阶函数原创 2021-06-13 08:54:10 · 85 阅读 · 0 评论 -
React学习(从零基础到精通)00010010
高阶函数_函数柯里化 <script type="text/babel"> //#region /* 高阶函数:如果一个函数符合下面2个规范中的任何一个,那该函数就是高阶函数 1. 若A函数,接收的参数是一个函数,那么A就可以称之为高阶函数 2. 若A函数,调用的返回值依然是一个函数,那么A就可以称之为高阶函数原创 2021-06-13 08:52:54 · 91 阅读 · 0 评论 -
React学习(从零基础到精通)00010001
react中收集表单数据2. 受控组件(类似vue中的双向数据绑定),建议还是写受控组件 <script type="text/babel"> //创建组件 class Login extends React.Component{ //初始化状态 state = { username:"", password:""原创 2021-06-13 08:51:13 · 68 阅读 · 0 评论 -
React学习(从零基础到精通)00010000
react中收集表单数据1.非受控组件 <script type="text/babel"> //创建组件 class Login extends React.Component{ handleSubmit = (event)=>{ event.preventDefault()//阻止表单提交 const {username,password} = thi原创 2021-06-13 08:49:12 · 63 阅读 · 0 评论 -
React学习(从零基础到精通)1111
react中的事件处理 <script type="text/babel"> /* 1. 通过onXxx属性指定事件处理函数(注意大小写),如onClick,原生的是onclick 1). React使用的是自定义(合成)事件,而不是使用的原生DOM事件---->为了更好的兼容性 2). React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)---->为了原创 2021-06-13 08:46:29 · 140 阅读 · 0 评论 -
React学习(从零基础到精通)1110
组件实例三大属性 refsReact.createRef() <script type="text/babel"> //创建组件 class Demo extends React.Component{ /* React.createRef调用后可以返回一个容器, 该容器可以存储被ref所标识的节点, 该容器是“专人专用”的,也就是原创 2021-06-13 08:45:06 · 100 阅读 · 0 评论 -
React学习(从零基础到精通)1101
组件实例三大属性 refs2. 回调函数形式的ref <script type="text/babel"> //创建组件 class Demo extends React.Component{ //展示左侧输入框的数据 showData = ()=>{ const {input1} = this console.log(input1原创 2021-06-13 08:42:56 · 95 阅读 · 0 评论 -
React学习(从零基础到精通)1100
组件实例三大属性 refs1. 字符串形式的ref(已过时) <script type="text/babel"> //创建组件 class Demo extends React.Component{ //展示左侧输入框的数据 showData = ()=>{ const {input1} = this.refs console.l原创 2021-06-13 08:41:02 · 66 阅读 · 0 评论 -
React学习(从零基础到精通)1011
函数组件使用props <script type="text/babel"> //创建函数组件 function Person (props){ const {name,age,sex} = props return ( <ul> <li>姓名:{name}</li> <li>性别:{sex}</原创 2021-06-13 08:38:00 · 95 阅读 · 0 评论 -
React学习(从零基础到精通)1010
props的简写方式 <script type="text/babel"> //创建组件 class Person extends React.Component { //对标签属性进行类型,必要性的限制 static propTypes = { name:PropTypes.string.isRequired,//限制name必传且为字符串 sex:PropTypes.string,//原创 2021-06-12 11:02:54 · 82 阅读 · 0 评论 -
React学习(从零基础到精通)1001
对props进行限制 <script type="text/babel"> //创建组件 class Person extends React.Component { render(){ // console.log(this); const {name,age,sex} = this.props; //props是只读的 // this.props.nam原创 2021-06-12 10:59:47 · 88 阅读 · 0 评论 -
React学习(从零基础到精通)1000
组件实例三大属性 ---props的基本使用 <script type="text/babel"> //创建组件 class Person extends React.Component { render(){ // console.log(this); const {name,age,sex} = this.props; return ( <原创 2021-06-12 10:58:20 · 54 阅读 · 0 评论 -
React学习(从零基础到精通)0111
state的简写方式 <script type="text/babel"> class Weather extends React.Component { // constructor(props) { // super(props) // this.state = { // isHot:false, // wind:"威风" //原创 2021-06-12 10:56:00 · 76 阅读 · 0 评论 -
React学习(从零基础到精通)0110
组件实例三大属性 state,props,refsstate <script type="text/babel"> //创建类式组件 class Weather extends React.Component { //构造器调用几次? --- 1次 constructor(props) { console.log("constructor") super(props)原创 2021-06-12 10:54:05 · 43 阅读 · 0 评论 -
React学习(从零基础到精通)0101
react中定义组件函数式组件 <script type="text/babel"> //创建函数式组件 function MYComponent(){ console.log(this);//此处的this是undefined,因为babel编译后开启了严格模式 return <h1>测试</h1> } //渲染组件到页面 ReactDOM.render(<MYCompon原创 2021-06-12 10:49:52 · 59 阅读 · 0 评论 -
React学习(从零基础到精通)0100
jsx小练习<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit原创 2021-06-12 10:46:15 · 96 阅读 · 2 评论 -
React学习(从零基础到精通)0011
jsx语法规则<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti原创 2021-06-12 10:43:08 · 128 阅读 · 3 评论 -
React学习(从零基础到精通)0010
虚拟DOM的两种创建方式1. 使用jsx创建虚拟DOM2. 使用js创建虚拟DOM原创 2021-06-12 10:35:25 · 45 阅读 · 0 评论 -
React学习(从零基础到精通)0001
hello react<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l原创 2021-06-12 10:26:13 · 101 阅读 · 0 评论