Web # react
关注
分享
扫一扫
前端工程师带你深入react了解各种开发场景！！！
Guo努力
拼命赚钱中...
展开
-
web全栈工程师必备技能
(注：* 了解即可)前端html / html5css / css3 / less ...js : es5 + dom + bomjqueryajaxes6 / es7 ...ts : type //大项目vue :vue vuex vue-router element-ui Vue-Cli ...Vite / Vue3Vue 2.x 源码 *小程序（例：微信小程序）进阶：react（react-dom）react ho...原创 2021-09-08 21:53:10 · 536 阅读 · 0 评论
-
Promise --- 面试
Promise --- 面试题打印顺序：先同后异，先微后宏原创 2021-11-24 15:06:36 · 608 阅读 · 1 评论 -
组件化----组件抽离
功能分析：在网页上显示两个个姓名及年龄的输入框及一个提交按钮，并让输入框的内容同步到网页上显示；抽离前：class App extends Component { state={name:'Guo努力',age:22} //同步数据 handleChange1=(e)=>{ this.setState({ name:e.target.value }) } handleChange2=(e)=>{ this.setState({原创 2021-11-19 20:12:47 · 1051 阅读 · 0 评论 -
React-app 项目框架搭建（2）
项目流程图：在 React-app 项目框架搭建（1）搭建好的基础上 将 文件 one-app 下的文件 src下的 默认样式全部删除 就保留 index.js 及 App.js 如图所示： 再将 App.js 中的默认样式及引入删除，如下图：同理修改 index.js :刷新打开的页面即可看到我们自己初始化的页面：之后我们在 src 目录下创建几个文件夹，使用模块化的思想，写项目...原创 2021-11-13 17:08:04 · 844 阅读 · 0 评论 -
React-app 项目框架搭建（1）
首先新建一个文件夹 react-app 并在 vs code 中打开 在此文件夹下建立一个 01-app 的文件夹；选中 01-app 鼠标右键在集成终端中打开；在终端中输入 如下 代码 进行全局安装脚手架；npm install -g create-react-app安装完毕后可输入 create-react-app --version 进行版本的查看，由图可知当前脚手架版本为4.0.3 ；在脚手架安装完毕的基础上 输入如下代码 搭建工程化项目 项目...原创 2021-11-13 16:33:50 · 845 阅读 · 0 评论 -
react 生命周期 钩子函数（笔记 2）
shouldComponentUpdate(){} : 每当进行数据更新或页面重新渲染时会触发，当函数返回值为 true 时页面可以更新，当返回值为 false 时页面不会更新而会保持原有状态。 class App extends React.Component{ state ={m:0} shouldComponentUpdate(){ console.log("----shouldComponentUpdate");原创 2021-11-09 17:36:17 · 490 阅读 · 0 评论 -
react 生命周期 钩子函数（笔记 1）
一. constructor(){} ： 初始化 this 问题 class App extends React.Component{ state ={} constructor(props){ super(props) //this.prosp=props console.log(this); //状态初始化 this.state={age:0} ...原创 2021-11-08 16:39:04 · 412 阅读 · 0 评论 -
react--留言板小案例（手敲代码）
流程：原型 --- 保真图 --- 静态页面( html css js ) --- 一个大组件( react component ) --- 组件拆分举个栗子react 简单的一个小案例，实现一个留言板功能，具有添加留言及删除评论的功能，并且同步显示到页面上。原型、保真图：静态页面：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...原创 2021-10-31 17:50:10 · 853 阅读 · 0 评论 -
react----瀑布流
由 state和 props 多个组件组成 组件树原创 2021-10-30 18:34:04 · 341 阅读 · 0 评论 -
react----单向数据流
单向数据流，传递数据采用从上至下逐一传递的方法。例： 定义一个类组件，使网页显示App组件class App extends React.Component{ state={name:'jack',age:18} render(){ return( <div> <h1>App组件</h1> </div> ...原创 2021-10-30 18:00:35 · 500 阅读 · 0 评论 -
React-ref-form(失去焦点/获取焦点)
功能描述：定义一个输入框及一个按钮，点击按钮使输入框失去焦点。原创 2021-10-08 10:39:06 · 2586 阅读 · 0 评论 -
React-ref-form 玩法（form表单收集）
实现功能：页面中显示一个输入框及一个提交按钮，当点击提交按钮button时，后台获取到输入框中所输入的内容。原创 2021-10-06 12:19:31 · 1159 阅读 · 0 评论 -
Web react异步请求解决方案（二）-----进阶
setState 中获取异步请求返回值例：页面显示a,b,c三个数和一个按钮，点击按钮使用setState的方法修改数据并打印返回值。 class App extends React.Component{ state={a:0,b:0,c:0} handleClick=()=>{ var result=this.setState({a:1}) console.log(result);原创 2021-09-27 21:02:31 · 329 阅读 · 0 评论 -
Web react异步请求解决方案（一）
例：求和，异步请求； function sum(a,b) { //异步请求 setTimeout(()=>{ return a+b; },2000); } var result=sum(1,2); console.log(result);结果返回值为 ：解决方案：1.使用callback回调函数 function sum(.原创 2021-09-27 19:33:06 · 832 阅读 · 0 评论 -
前端 react-render 中有趣的函数/玩法（ jsx 语法 ）
react -jsx 就是用js语法封装了各种组件，通过挂载组件实现各种功能 （ALL in JS）1.map函数一个数组使用map函数可以快速遍历应对其进行操作；例1：一个数组中含有一些数，遍历输出数组中的数乘以2后的结果 let source=[1,2,2,3,5,9] let double=source.map(i=>i*2) console.log(double);运行结果：例2 ：使用列表的方式展示数据（封...原创 2021-10-02 14:24:25 · 273 阅读 · 0 评论