摘要:        
从jsx中抽离过多js逻辑代码 会显得非常混乱 推荐:将逻辑抽离到单独的方法中 保证jsx结构清晰 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 // 约定1:类组件必须以大写字母开头 // 约    阅读全文
posted @ 2022-05-13 21:03
前端导师歌谣
阅读(26)
评论(0)
推荐(0)
        
            
        
        
摘要:        
1箭头函数 利用箭头函数自身不绑定this的特点 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 // 约定1:类组件必须以大写字母开头 // 约定2:类组件应该继承react.component    阅读全文
posted @ 2022-05-13 21:03
前端导师歌谣
阅读(34)
评论(0)
推荐(0)
        
            
        
        
摘要:        
事件this指向bind 利用ES5中bind方法 将事件处理程序中的this和组件实例绑定在一起 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 // 约定1:类组件必须以大写字母开头 // 约    阅读全文
posted @ 2022-05-13 21:03
前端导师歌谣
阅读(30)
评论(0)
推荐(0)
        
            
        
        
摘要:        
1上次说过了mysql的主从配置 tar zxf keepalived-1.2.7.tar.gz cd keepalived-1.2.7 yum install gcc gcc-c++ yum install kernel-devel -y 2报错 configure: error: Popt li    阅读全文
posted @ 2022-05-13 21:03
前端导师歌谣
阅读(47)
评论(0)
推荐(0)
        
            
        
        
摘要:        
2.3抽离为单独组件 组件作为一个单独的个体,一般把每个组件放在单独的js中文件中 1创建hello.js 2在hello.js中导入React 3创建组件(函数或者类) hello.js子组件 //导入react import React from "react" //创建组件 class Hel    阅读全文
posted @ 2022-05-13 21:03
前端导师歌谣
阅读(59)
评论(0)
推荐(0)
        
            
        
        
摘要:        
3.1事件绑定 React事件绑定语法和DOM事件语法相似 语法:on+事件名称={事件处理程序} 比如οnclick={()=>{}} //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 impor    阅读全文
posted @ 2022-05-13 21:03
前端导师歌谣
阅读(22)
评论(0)
推荐(0)
        
            
        
        
摘要:        
3.2事件对象 可以通过事件处理程序的参数 React中的事件对象叫做:合成事件(对象) 合成事件:兼容所有浏览器 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 import Hello fro    阅读全文
posted @ 2022-05-13 21:03
前端导师歌谣
阅读(39)
评论(0)
推荐(0)
        
            
        
        
摘要:        
函数组件又叫做无状态组件 类组件叫做有状态组件 状态state即数据 函数组件没有自己的状态 值负责数据的展示 类组件有自己的状态 负责更新UI 让页面“”动”起来    阅读全文
posted @ 2022-05-13 21:03
前端导师歌谣
阅读(24)
评论(0)
推荐(0)
        
            
        
        
摘要:        
5.1state的基本使用 状态:数据 是组件内部的私有数据 只能再组件内部使用 state的值是对象 表示一个组件中可以有多个数据 获取数据 this.state //导入react import React from 'react' import ReactDOM from 'react-dom    阅读全文
posted @ 2022-05-13 21:03
前端导师歌谣
阅读(53)
评论(0)
推荐(0)
        
            
        
        
摘要:        
状态是改变的 语法:this.setstate 千万不要直接改变this.setState setState 修改state 更新ui 数据驱动视图 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件    阅读全文
posted @ 2022-05-13 21:03
前端导师歌谣
阅读(32)
评论(0)
推荐(0)
        
            
        
        
摘要:        
嵌入js表达式 数据存储在js中 语法{javascript表达式} 注意语法中是单大括号 不是双大括号 //导入react import React from "react" import ReactDOM from "react-dom" //第一步创建jsx创建react元素 const na    阅读全文
posted @ 2022-05-13 21:03
前端导师歌谣
阅读(42)
评论(0)
推荐(0)
        
            
        
        
摘要:        
注意点 单大括号中可以使用任意的表达式 jsx自身也是js表达式 注意:js中的对是一个例外 写在style样式中 //导入react import React from "react" import ReactDOM from "react-dom" //第一步创建jsx创建react元素 con    阅读全文
posted @ 2022-05-13 21:03
前端导师歌谣
阅读(21)
评论(0)
推荐(0)
        
            
        
        
摘要:        
jsx中的条件渲染 场景:loding效果 条件渲染:根据条件渲染特定的jsx结构 可以使用if/else或者三元运算符和逻辑和运算符实现 //导入react import React from "react" import ReactDOM from "react-dom" //第一步创建jsx创    阅读全文
posted @ 2022-05-13 21:03
前端导师歌谣
阅读(43)
评论(0)
推荐(0)
        
            
        
        
摘要:        
如果要渲染一组数组 应该使用数组的map方法 注意:渲染列表时候添加key属性 key属性的值要保持唯一 原则:map()遍历谁 就给谁添加key属性 尽量避免索引号作为key //导入react import React from "react" import ReactDOM from "rea    阅读全文
posted @ 2022-05-13 21:03
前端导师歌谣
阅读(40)
评论(0)
推荐(0)
        
            
        
        
摘要:        
1行内样式-style <h1 style={{color:"red",backgroundColor:"skyblue"}}> jsx的样式处理 </h1> 2类名 className(推荐) <h1 className="title"></h1> //导入react import React f    阅读全文
posted @ 2022-05-13 21:03
前端导师歌谣
阅读(26)
评论(0)
推荐(0)
        
            
        
        
摘要:        
JSX 1jsx是react的核心内容 2jsx是在js代码中写HTML结构,是react中声明式的提现 3使用jsx配合嵌入的js表达式,条件渲染,列表渲染,可以描述任意ui结构 4推荐使用calssName的方式给jsx添加样式 5react完全利用js自身能力编写ui 而不是造轮子增强HTML    阅读全文
posted @ 2022-05-13 21:03
前端导师歌谣
阅读(23)
评论(0)
推荐(0)
        
            
        
        
摘要:        
1.4注意点 1React元素的属性名使用驼峰式命名法 2特殊属性名 class-className for->htmlFor 3没有子节点可以用单标签表示 4使用小括号包裹jsx const div=(<h1>geyao</h1>)    阅读全文
posted @ 2022-05-13 21:03
前端导师歌谣
阅读(25)
评论(0)
推荐(0)
        
            
        
        
摘要:        
1能够使用函数创建组件 2能够使用class创建组件 3能够给react元素绑定事件 4能够使用state和setstate 5能够处理事件中的this指向问题 6能够使用受控组件处理表单    阅读全文
posted @ 2022-05-13 21:03
前端导师歌谣
阅读(28)
评论(0)
推荐(0)
        
            
        
        
摘要:        
1使用函数创建组件 函数组件:使用js的函数或者箭头函数创建的组件 约定1:函数组件名称必须以 开头 约定2:函数组件必须有返回值 表示该组件的结构 如果返回值为null 表示不渲染任何内容 2.1使用函数创建组件 1渲染函数组件:用函数名作为组件标签名 2组件标签可以是单标签也可以是多标签 //导    阅读全文
posted @ 2022-05-13 21:03
前端导师歌谣
阅读(84)
评论(0)
推荐(0)
        
            
        
        
摘要:        
2.2使用类创建组件 类组件:使用ES6的class创建的组件 约定1:类组件必须以大写字母开头 约定2:类组件应该继承react.component父类 从中可以使用父类的方法和属性 约定3:组件必须提供render方法 约定4:render方法必须有返回值 //导入react import Re    阅读全文
posted @ 2022-05-13 21:03
前端导师歌谣
阅读(38)
评论(0)
推荐(0)
        

 
         浙公网安备 33010602011771号
浙公网安备 33010602011771号