![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
文章平均质量分 68
Hler
这个作者很懒,什么都没留下…
展开
-
使用webpack构建react项目
本文介绍r构建eact项目相关的webpack配置。原创 2022-11-26 17:07:44 · 327 阅读 · 0 评论 -
react补充--hooks
1. setStatesetState更新状态的2种写法 (1). setState(stateChange, [callback])------对象式的setState 1.stateChange为状态改变对象(该对象可以体现出状态的更改) 2.callback是可选的回调函数, 它在状态更新完毕、界面也更新后(render调用后)才被调用 (2). setState(updater, [callback])------函数式的setSta原创 2021-09-04 10:54:24 · 199 阅读 · 0 评论 -
react路由
基本路由的使用第一步:安装react-router-dom包npm i react-router-dom第二步:引入import {Route,Link} from 'react-router-dom'第三步:编写路由链接 <Link className="list-group-item" to="/about">About</Link>第四步:注册路由<Route path="/about" component={About}/>第五步:外层原创 2021-09-03 15:38:35 · 75 阅读 · 0 评论 -
react脚手架
安装脚手架项目#1.全局安装npm i -g create-react-app#2.切换到对应项目的目录,使用命令:create-react-app project-name#3.进入项目文件夹cd project-name#4.启动项目npm startreact脚手架项目结构public --- 静态资源文件夹 faicon.icon --- 网站页签图标 index.html --- 主页面 logo.png -- 一些需要使用的logo图 mainfest.json -原创 2021-08-31 15:30:39 · 243 阅读 · 0 评论 -
组件生命周期(旧&新)
组件生命周期流程图(旧):生命周期的三个阶段(旧):初始化阶段:由ReactDOM.render()出发–出次渲染a. constructor() 构造器b. componentWillMount() 组件将要挂载c. render()d. componentDidMount() 组件完成挂载更新阶段:由组件内部this.setState()或父组件重新render()触发a. shouldComponentUpdate()b. componentWillUpdate()c. re原创 2021-08-20 12:17:23 · 87 阅读 · 0 评论 -
表单内容--受控组件/非受控组件
表单内容受控组件非受控组件受控组件点击提交上传数据class Login extends React.Component{ handleSubmit = () = >{ const {username,password} = this alert(`你输入用户名是:${username.value}`,`你的密码是:${password.value}`) } render(){ return{ <form action="" onSubmit="handleSub原创 2021-08-10 16:58:29 · 74 阅读 · 0 评论 -
react面向组件化编程--组件三大核心属性state/props/refs
这里写目录标题组件三大核心之一 ----- state简写state组件三大核心之一 ----- propsprops简写组件三大核心之一 ----- refs组件三大核心之一 ----- state需求: 定义一个展示天气信息的组件默认展示天气炎热 或 凉爽点击文字切换天气理解:state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)实现:<script原创 2021-08-09 18:08:59 · 184 阅读 · 0 评论 -
react入门
这里写目录标题react的特点创建虚拟DOMjsx语法规则:形式模块化组件化react的特点声明式编码(相对于命令式编码)组件化编码React Native编写原生应用(可以在学习了react之后学习 React Native)高效(优秀的Diffing算法)React高校原因使用虚拟DOM,没有直接操作页面真实DOMDOM Diffing算法,最小化页面重绘(Diffing算法可以比较新的DOM与旧的DOM是否有区别,有区别重绘,无区别就无需再绘DOM)创建虚拟DOM方式一原创 2021-08-06 17:11:14 · 66 阅读 · 0 评论