一、react是什么

react是一个用于构建用户界面的 JavaScript 库

二、怎么用

2.1. 安装脚手架


npm i create-react-app -g

2.2. 创建项目

create-react-app 项目名

2.3. 启动项目

npm start

二、元素渲染

文本渲染

const str = "hello world"
function App() {return (<div><p>{str}</p><p>{3 - 1}</p><p>{str.split('').reverse().join('')}</p></div>)
}
export default App;

html渲染

import './App.css';const stl = {fontSize:'24px',color:'red'
}
function App(){return (<div><h1 className='myh'>我是张三</h1>{<p style={stl}>我会变色</p>}</div>)
}
export default App;

三、条件渲染

&& 与三目运算符

const str = '给我爱吃的喜之郎';
const msg = '还是<strong>html</strong>简单';
const score = 80;
let flag = true;
const list = ['react','vue','angular','jQuery'];
function App(){return (<div><h1>长大我想当太空人</h1><p>爷爷奶奶可高兴了</p><p>{str}</p><p>{2+3}</p><p>{str.length}</p><p>{str.split('').reverse().join('')}</p><p>条件渲染</p><p dangerouslySetInnerHTML={{__html:msg}}></p><p>条件渲染</p>{score>=60?'及格':'再学一遍'}{flag&&<p>啊这</p>}<p>列表渲染</p>{list.map((item,index)=><h3 key={index}>{item}</h3>)}</div>)
}
export default App;

如果条件是 true ，&& 右侧的元素就会被渲染，如果是 false，React 会忽略并跳过它。

四、列表渲染

import './App.css';const arr = [<p key='a'>我直接坐飞机去你的坟头</p>,<p key='b'>疯狂的偷吃你的贡品</p>,<h1 key='c'>我是谁</h1>
]
const stl = {fontSize:'24px',color:'red'
}
function App(){return (<div><h1 className='myh'>张三</h1>{arr}{<p style={stl}>应用样式</p>}</div>)
}
export default App;

key 帮助 React 识别哪些元素改变了，比如被添加或删除。应当给数组中的每一个元素赋予一个确定的标识。
如果列表项目的顺序可能会变化，不建议使用索引来用作 key 值，因为这样做会导致性能变差，还可能引起组件状态的问题。

五、事件渲染

React 事件与 js 事件一致，但是React 事件的命名采用小驼峰式（camelCase）

5.1、箭头函数 onClick={()=>{ xx }}

function App() {return (<div><button onClick={() => { alert("秋天") }}>按钮</button></div>)
}
export default App;

5.2、onClick={函数名}

const say = function () {alert("秋天")
}
function App() {return (<div><button onClick={say}>按钮</button></div>)
}
export default App;

5.3、onClick={函数名.bind(this,参数)}

const say = function (str) {alert("秋天" + str)
}
function App() {return (<div><button onClick={say.bind(this, '真美')}>按钮</button></div>)
}
export default App;

5.4、onClick={()=>函数名(参数)}

const say = function (str) {alert("秋天" + str)
}
function App() {return (<div><button onClick={() => say('真温柔')}>按钮</button></div>)
}
export default App;

六、react 响应式数据 State


import React,{Component}from 'react';
class App extends Component{constructor(props) {super(props);this.state={num:1}}addNum(n){this.setState({num:this.state.num+n})}render(){return(<div><h1>函数类</h1><button onClick={()=>{this.setState({num:this.state.num+1})}}>{this.state.num}</button><button onClick={this.addNum.bind(this,2)}>{this.state.num}</button></div>);}
}
export default App;

带你了解一下reac框架相关推荐

从理论到工具 - 带你全面了解自动化测试框架
什么是自动化测试框架 01 什么是框架框架是整个或部分系统的可重用设计,表现为一组抽象构件及构件实例间交互的方法.它规定了应用的体系结构,阐明了整个设计.协作构件之间的依赖关系.责任分配和控制流程, ...
手把手带你撸一把springsecurity框架源码中的认证流程
提springsecurity之前,不得不说一下另外一个轻量级的安全框架Shiro,在springboot未出世之前,Shiro可谓是颇有统一J2EE的安全领域的趋势. 有关shiro的技术点 1.s ...
手写带注册中心的rpc框架(Netty版和Socket版)
之前使用socket实现了一个简单的RPC框架调用,不了解RPC的实现原理的可以看下那篇文章手写实现RPC框架基础功能之前的客户端里是写死了服务端的ip和端口号,这里代码做了个优化,使用zooke ...
带你玩转 ui 框架 ——scoped及样式穿透问题详解
前言在我们前端的开发中经常会使用到各种 ui 框架下面这两个是比较火的,也是我常用的两个ui框架. 问题描述但是在使用框架的时候难免会遇到需要改变组件中的一些样式,当然如果我们所有页面的组件样式 ...
BATJ大数据架构师带你领略实时计算框架Flink的魅力！
你是不是经常体验或看到以下这些场景? "小张,你看能不能做个监控大屏实时查看促销活动销售额(GMV)?" "小王,我们现在搞促销活动能不能实时统计销量 Top3 啊?&q ...
从理论到工具：带你全面了解自动化测试框架
软件行业正迈向自主.快速.高效的未来.为了跟上这个高速前进的生态系统的步伐,必须加快应用程序的交付时间,但不能以牺牲质量为代价.快速实现质量是必要的,因此质量保证得到了很多关注.为了满足卓越的质量和更 ...
web自动化如何在不同浏览器运行_从理论到工具：带你全面了解自动化测试框架...
软件行业正迈向自主.快速.高效的未来.为了跟上这个高速前进的生态系统的步伐,必须加快应用程序的交付时间,但不能以牺牲质量为代价.快速实现质量是必要的,因此质量保证得到了很多关注.为了满足卓越的质量和更 ...
一文带你快速上手Highcharts框架
前言前端开发中,数据可视化尤为重要,最有效的方式可以通过图表库进行数据可视化,其中 ECharts.Highcharts 提供了丰富的图表,适用各种各样的功能,ECharts 相对来说基本可满足日常 ...
带你全面了解自动化测试框架—从理论到工具
软件行业正迈向自主.快速.高效的未来.为了跟上这个高速前进的生态系统的步伐,必须加快应用程序的交付时间,但不能以牺牲质量为代价.快速实现质量是必要的,因此质量保证得到了很多关注.为了满足卓越的质量和更 ...

带你了解一下reac框架

一、react是什么

二、怎么用

二、元素渲染

文本渲染

html渲染

三、条件渲染

&& 与三目运算符

四、列表渲染

五、事件渲染

5.1、箭头函数 onClick={()=>{ xx }}

5.2、onClick={函数名}

5.3、onClick={函数名.bind(this,参数)}

5.4、onClick={()=>函数名(参数)}

六、react 响应式数据 State

带你了解一下reac框架相关推荐

最新文章

热门文章