![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
react
对react的基本了解
Cherish_喜爱
前端菜虫
展开
-
React安装以及基本介绍
React介绍:用于构建用户界面的JavaSript库。特点:声明式 编码组件化 编码支持客户端与服务器渲染高效单向数据流React高效的原因:虚拟DOM,不总是直接操作DOM(较少更新的次数)。DOM Diff 算法(算哪些地方需要更新,减少更新的区域),最小化页面重绘。环境安装: React项目是基于Node.js的工程化项目,需要使用npm来管理依赖。Node环境下载地址:https://nodejs.org/zh-cn/下载完成后我们可以cmd一下输入no原创 2020-06-06 18:28:41 · 211 阅读 · 0 评论 -
《深入React技术栈》--事件系统
虚拟DOM在内存中是以对象的形式存在,如果想要在这些对象上添加事件,就会非常简单。React基于虚拟DOM实现了一个合成事件层,我们所定义的事件处理器会接收到一个合成事件对象的实例,它完全符合W3C(万维网联盟)标准,不会存在任何IE标准的兼容性问题。所有的事件都自动绑定到最外层。 在JSX中,我们必须使用驼峰的形式来书写时间的属性名(onClick),而HTML事件的属性名不区分大小写。...原创 2020-04-12 18:30:05 · 124 阅读 · 0 评论 -
《深入React技术栈》--React数据流
在React中,数据是自顶向下单向流动,即从父组件到子组件。state与props是React组件中最重要的概念。如果顶层组件初始化props,那么React会向下遍历整棵组件树,重新尝试渲染所有相关的子组件。而state只关心每个组件自己内部的状态,这些状态只能在组件内改变。一、state:在React没有结合Flux或Redux框架前,它自身也同样可以管理组件的内部状态。在React中,把...原创 2020-04-10 20:53:28 · 208 阅读 · 0 评论 -
《深入React技术栈》--React组件的构建
React组件基本上由三个3个部分组成——属性(props)、状态(state)、以及生命周期方法。我们用一张图来简单概括一下React:React组件可以接收参数,也可能有自身的状态。一旦接收到的参数或自身的状态有所改变,React组件就会执行相应的生命周期方法。1、React组件的构建方法:React组件基本上由组建的构建方式、组件内的属性状态与生命周期方法组成。官方在React组...原创 2020-04-10 16:59:41 · 151 阅读 · 0 评论 -
react--node.js中间件解决跨域问题
跨域问题解决了很长时间,一直踩坑,但是今天终于解决了。网上关于跨域的博客很多但方法还是那几种,最主要的问题是忽略的版本的更新。下面我将针对新版本写一下跨域的解决方法。在这里我们手动配置代理:注意:此功能可用于react-scripts@2.0.0或更高版本首先:$ npm install http-proxy-middleware --save$#或$ yarn添加http-pr...原创 2020-03-10 20:14:14 · 479 阅读 · 0 评论 -
react--组件中收集表单数据
首先我们先了解一个概念:受控组件和非受控组件受控组件:在 HTML 中,表单元素通常自己维护 state,并根据用户输入进行更新。而在 React 中,可变状态通常保存在组件的 state 属性中,并且只能通过使用 setState()来更新。我们可以把两者结合起来,使 React 的 state 成为“唯一数据源”。渲染表单的 React 组件还控制着用户输入过程中表单发生的操作。被 Reac...原创 2020-03-08 20:25:35 · 322 阅读 · 0 评论 -
React中使用React_ui
React学习React创建脚手架应用: React脚手架:能够快速的创建一个项目结构,并下载部分依赖。 整体的技术构架为:react+webpack+es6+eslint。 项目特点: 模块化、组件化、工程化。 这里我们使用官方推荐的:create-react-app。 命令:npm install -g create-react-app (全局安装)cr...原创 2020-03-08 17:35:49 · 134 阅读 · 0 评论 -
React组件基本定义和使用以及三大属性
React组件基本定义和使用1、定义组件 方式一:工厂函数组件(简单组件)function MyComponent() { return <h2>工厂函数组件(简单组件)</h2>}  方式二:ES6类组件(复杂组件)class MyComponent2 extends React.Component{ rende...原创 2019-12-15 11:04:19 · 527 阅读 · 1 评论