React
Fx_cap
前端
展开
-
react脚手架配置代理
方法一在package.json中追加如下配置"proxy":"http://localhost:5000"说明: 优点:配置简单,前端请求资源时可以不加任何前缀。 缺点:不能配置多个代理。 工作方式:上述方式配置代理,当请求了3000不存在的资源时,那么该请求会转发给5000 (优先匹配前端资源) 方法二 创建代理配置文件 在src下创建配置文件:src/setupProxy.js 编写setupProxy.js配置具体代理规则:.原创 2022-05-12 16:58:39 · 125 阅读 · 0 评论 -
React/Vue中key的作用
react/vue中的key有什么作用?(key的内部原理是什么?)为什么遍历列表时,key最好不要用index?一 、虚拟DOM中key的作用: 简单的说: key是虚拟DOM对象的标识, 在更新显示时key起着极其重要的作用。 详细的说: 当状态中的数据发生变化时,react会根据【新数据】生成【新的虚拟DOM】, 随后React进行【新虚拟DOM】与【旧虚拟DOM】的diff比较,比较规则如下:旧虚拟DOM中找到了与新虚拟DOM相同的key:若虚拟DOM中内容没变,原创 2022-05-10 19:33:45 · 188 阅读 · 0 评论 -
react中父子组件的生命周期
react中父子组件的生命周期原创 2022-05-10 00:25:34 · 534 阅读 · 0 评论 -
React事件绑定
React事件绑定和原生DOM事件绑定相似 语法:on+事件名={事件处理程序} 例如:onClick={()=>{}} 注意:React事件采用驼峰命名法类组件事件绑定import React from 'react';import ReactDOM from 'react-dom';class App extends React.Component { handleClick() { console.log(111); } render() { retu原创 2021-12-15 23:34:12 · 893 阅读 · 0 评论 -
如何将React组件抽离为单独的JS文件
步骤:创建Hello.js文件 在Hello.js文件中导入React 在Hello.js文件中创建组件(函数/类组件) 在Hello.js文件中导出组件 在index.js文件中导入Hello组件 在index.js文件中渲染Hello组件代码://Hello.jsimport React from 'react'class Hello extend React.Component{ render(){ return (<d原创 2021-12-13 23:31:30 · 1167 阅读 · 0 评论 -
创建React组件----类组件
类名必须以大写字母开头 类组件应该继承React.component父类,从而可以使用父类的属性和方法 类组件必须提供render()方法 render()方法必须有返回值.表示组件的结构 返回内容为空则返回null代码:class Hello extends React.Componment{ render(){ return (<div>Hello React</div>)}}ReactDOM.render(<Hello /&原创 2021-12-13 23:24:35 · 355 阅读 · 0 评论 -
创建React组件----函数组件
函数必须有 return 返回值 函数名称必须是大写字母开头 使用函数名作为组件的标签代码:function Hello (){ return (<div>Hello React</div>)}ReactDOM.render(<Hello />,document.getElementById('root'))...原创 2021-12-13 23:18:06 · 565 阅读 · 0 评论 -
JSX的基本使用----JSX的列表渲染
渲染列表使用的数组的map方法规则:渲染谁给谁加唯一的固定的key值不推荐使用索引:因为当数组发生添加/删除成员时,索引会发生改变const list=[ {id:1,city:'北京'}, {id:2,city:'上海'}, {id:3,city:'广州'}, {id:4,city:'深圳'} ]const lis=list.map(item=>(<li key='{item.id}'>{item.city}</li>))con原创 2021-12-12 20:50:11 · 278 阅读 · 0 评论 -
JSX的基本使用----JSX的条件渲染
JSX的条件渲染有3中方法,分别是if-else语句 三元表达式 逻辑与if-else语句const isLoading = trueconst title = () => { if (isLoading) { return <h1>加载成功</h1> } return <h1>加载中</h1>}const dv = ( <div> {title()} </div>)原创 2021-12-12 20:30:59 · 552 阅读 · 0 评论 -
JSX的基本使用----JSX中使用JS表达式
JSX中使用到JS的变量语法:{JS 表达式}⚠️注意:要区分Vue中html中的双花括号的差值表达式const name='Jack'const title=(<h1>{name}</h1>)原创 2021-12-12 20:18:00 · 329 阅读 · 0 评论 -
JSX的基本使用-----创建React元素
JSX表示在JS代码中写HTML代码,是React声明式的表现React创建的元素的两种方式:creatElement()方法和JSX1、使用JSX创建React元素const title=(<h1>Hello React</h1>)2、使用ReactDOM.render()方法渲染React元素到页面中ReactDOM.render(title,document.getElementById('root'))⚠️注意点:React元素的属性名使用驼峰原创 2021-12-12 20:05:10 · 430 阅读 · 0 评论 -
React 的基本使用
最近在学习 React ,慢慢记录中~~✌????效果:步骤:一、React 脚手架的使用1、初始化项目npx create-react-app 项目名称2、进入项目cd 项目名称3、启动项目npm start 或 yarn start二、在脚手架中使用React1、在 src 下 index.js 文件内导入 React 和 ReactDOM (⚠️注意顺序不可以颠倒)import React from 'react'import ReactD原创 2021-12-12 02:50:29 · 92 阅读 · 0 评论