一、react是什么?
react是一个用于构建用户界面的 JavaScript 库
二、使用步骤
安装react
1. 安装脚手架
npm i create-react-app -g
2. 创建项目
create-react-app 项目名
3. 启动项目
npm start
二、元素渲染
文本渲染
const str = "你好react"
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)
事件的四种语法:
1、箭头函数 onClick={()=>{ xx }}
function App() {
return (<div>
<button onClick={() => { alert("秋天") }}>按钮</button>
</div>)
}
export default App;
2、onClick={函数名}
const say = function () {
alert("秋天")
}
function App() {
return (<div>
<button onClick={say}>按钮</button>
</div>)
}
export default App;
3、onClick={函数名.bind(this,参数)}
const say = function (str) {
alert("秋天" + str)
}
function App() {
return (<div>
<button onClick={say.bind(this, '真美')}>按钮</button>
</div>)
}
export default App;
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;