![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
文章平均质量分 54
David凉宸
前端领域优质创作者、新星计划第一季Mix赛道新星获得者、前端技能树社区创建人 ----
一分耕耘,一分收获
展开
-
一文了解React
什么是ReactReact是一个用于构建用户界面的JavaScript库用户界面:HTML页面(前端)React主要用来写HTML页面或构建Web应用React一般被用来作为MVC中的V层,React仅仅是视图层,只负责视图的渲染,并非提供了M、C的功能,它不依赖其他任何的库,因此开发中,可以与任何其他的库集成使用,React的思想非常独特,性能出众,可以写出重复代码少,逻辑清晰的前端代码。React的语法是jsx,通过使用这种语法,可以在react代码中直接混合使用js和html来编写代码,这样代原创 2021-05-17 19:19:24 · 310 阅读 · 2 评论 -
只需5分钟学会使用React
React的安装安装命令: npm i react react-domreact 是核心,提供创建元素、组件等功能react-dom 提供DOM相关功能React的使用引入react 和 react-dom两个js文件注意顺序(一定要先引入react在引入react-dom)<script src="./node_modules/react/umd/react.development.js"></script><script src="./nod原创 2021-05-17 20:23:58 · 354 阅读 · 1 评论 -
包你学会使用脚手架创建React
React 脚手架 意义脚手架是开发现代Web应用必备(现在已经不再是创建一个页面,在里面写HTML、css、js时代了)充分利用Webpack、Babel、ESLint等工具辅助项目开发零配置,无需手动配置繁琐的工具即可开始使用可以更多的去关注业务,而不是配置工具使用React 脚手架 初始化项目1.初始化项目命令:npx create-react-app myAppnpx create-react-app 项目名...原创 2021-05-19 15:16:27 · 327 阅读 · 2 评论 -
只需5分钟教会你使用React中的JSX
JSX的基本使用createElement()的问题编写繁琐不简洁非常的不直观,无法直接看出结构不优雅,用户体验不好JSX写法JSX简介JSX是Javascript的一种语法拓展JSX是JavaScript XML简写,表示在JavaScript中编写XML格式代码(也就是HTML格式)优势:声明式语法更加直观与HTML结构相同降低了学习成本、提升开发效率JSX是react的核心使用使用JSX语法创建react元素const title = <h1 &g原创 2021-05-21 11:37:01 · 2119 阅读 · 9 评论 -
一文秒懂React组件
React 组件介绍组件是React 的一等户,使用React的同时就是在使用组件组件表示页面中部分功能多个组件的组合实现完整页面功能特点:可复用、组合、独立React 组件的创建方式使用函数创建使用JS 的函数创建的组件function Title () { return ( <div> <p>HELLO</p> </div> )}我们看着这样写和其他没什么区别 所有我们就做了约定约定1原创 2021-05-24 14:37:05 · 220 阅读 · 2 评论 -
让你秒懂React有状态组件和无状态组件
函数组件叫做无状态组件,类组件叫做有状态组件状态(state)即数据函数组件没有自己的状态,只负责数据展示类组件有自己的状态,负责UI更新,可以让页面"动"原创 2021-05-24 15:14:17 · 193 阅读 · 0 评论 -
手把手教会你使用React中state和setState方法
state的基本使用状态(state)即数据,是组件内的私有数据,只可以在组件的内部使用state的值是对象,意为一个组件中有多个数据初始化state:获取状态:this.statesetState()修改状态状态是可以改变的语法:this.setState({要修改的数据})不要直接修改state中的值setState()作用:修改state 更新UI(页面渲染新数据)数据驱动视图从JSX中抽离事件处理程序JSX中掺杂过多JS逻辑代码,会显得非常混乱推荐原创 2021-05-24 15:52:50 · 451 阅读 · 3 评论 -
从零教你学会使用React表单
受控组件HTML中的表单元素是可输入的,有自己的可变状态React中可变状态通常保存在state中,并且只能通过setState()方法来修改React将state 与表单元素值value绑定到一起,由state的值来控制表单元素的值<input type="text" value={this.state.text}/>受控组件∶其值受到React控制的表单元素使用:在state中添加一个状态,作为表单元素的value值给表单元素绑定change事件,将表单元素的值原创 2021-05-24 16:36:20 · 413 阅读 · 3 评论 -
零基础教你使用React事件处理方法
事件绑定React事件绑定语法与DOM事件语法相似语法: on+事件名称={事件处理程序},例如: onClick={() =>{}}注意点:React事件采用驼峰命名法,例如onClick,onFocus… 否则事件不生效类创建组件事件绑定函数创建组件事件绑定两种方式一定要注意:函数和类创建组件事件绑定方式略有不同事件对象可以通过事件处理程序的参数获取到事件对象React中的事件对象叫做︰合成事件(对象)合成事件:兼容所有浏览器,无需担心浏览器兼容性平常放一个a标原创 2021-05-24 15:09:49 · 348 阅读 · 0 评论 -
手把手教你从零到有学会React组件通讯
组件通讯介绍组件是独立且封闭的单元,默认只能使用组件自己的数据,在组件化过程中,我们将一个完整的功能拆分为多个组件,以便于更好的完成整个应用的功能。在这个过程中,多个组件之间不可避免的要使用共享一些数据,实现这些功能,我们就需要打破组件的独立封闭性,让其与外界进行沟通,这个过程就算组件通讯组件的props组件是封闭性的,要接收外部传来的数据就要通过props实现props作用:接收传递给组件的数据传递数据:给组件标签添加自定义属性<Title name="Tom" age={19}原创 2021-05-25 15:14:10 · 535 阅读 · 28 评论 -
一文带你搞懂React生命周期
你真的了解React生命周期吗?带你了解之前先看个YYDS(永远的神)看也看完了,那就直接上教程了创建时(挂载)执行的时机:组件创建的时候(页面加载)执行的顺序constructor阶段:我们可以初始化state状态,也可以为事件处理绑定this(否则的话this是undefined)constructor() { super() this.state = { name: 'david_远', age: '保密' } thi原创 2021-05-28 08:27:51 · 562 阅读 · 47 评论 -
带你走进React路由的世界
介绍对路由进行管理。在传统的没有使用路由情况下,通过读取url中的hash值来进行识别加载的组件react路由则将路由解析,映射关系进行了封装,通过配置进行管理现代的前端多数是SPA(单页面程序),SPA使用户的体验更好、服务器压力小,所以才会如此受欢迎1)规则配置: 根据配置的规则进行对应匹配2)路径匹配:根据路径中定义的参数进行对应匹配3)优先级:在相同的规则下,顶层规则会被优先匹配使用安装npm install --save react-router-dom导入路由核心组件原创 2021-06-04 18:02:43 · 315 阅读 · 39 评论