React-JSX语法

1、React和Vue的区别

（1）设计理念：react是一个声明式UI库，强调的是函数式编程，学习难度较高，vue是渐进式框架，学习难度较低

（2）模板语法：react使用的是JSX语法，逻辑和视图混合编写，vue使用的是HTML模板语法，逻辑和视图分离；

（3）数据流：vue通过v-model可以实现双向数据绑定，react是单向数据流，必须要手动调用setState或Hooks更新；(必须要将其定义为受控组件，在input框中绑定value={this.state.value}，并给其绑定一个 onChange={this.handleChange}函数，监听input输入框的变化，通过handleChange(event) {

this.setState({value: event.target.value});}从而去更新state中的属性)；

（4） ‌生态系统：react拥有庞大的生态系统和第三方库，适合复杂场景的开发，Vue是官方提供的全家桶，适合快速开发中小项目；

2、JSX简介

• 遇到 < 开头的代码, 以标签的语法解析: html 同名标签转换为 html 同名元素, 其它标签需要特别解析 ；
• 遇到以 { 开头的代码，以 JS 的语法解析: 标签中的 js 代码必须用{ }包含；
• 对于 label 标签的 for 属性，使用 htmlFor 标签代替，标签的class属性，使用className代替；

3、样式引入

行内样式：可以使用style属性定义样式，使用{}表示js代码，内部的样式是一个json对象格式，需要再用{}括起来

<div style={{color:"red", fontSize: 30}}></div>

内联样式：React 会在指定元素数字后自动添加 px

let mystyle = {color: "blue",fontSize: 30,
}
return(<div style={mystyle}>水浒传</div>
)

4、图片引入

（1）分离引入方式

import boy from './assets/img/pic3.png'
<img alt="" src={boy} /> 

（2）通过require引入

<img alt="" src={require('./assets/img/pic4.png')} />

（3）引入线上地址

<img alt="" src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1807710913,34060765&fm=26&gp=0.jpg" />

5、条件渲染

（1）三目运算符：在 JSX 内部不能使用 if else 语句，但可以使用三元运算表达式来替代

let flag = true;
<div>{flag ? "show" : "hidden"}</div>
<div>{flag ? <span>立即注册</span> : ''}</div>

（2）使用&&来去掉三目运算符的否则

let flag = true;
<div>{flag && <span>条件渲染</span>}</div>

（3）复杂条件渲染

const list = [{ name: '张三', age: 18, type: 0 },{ name: '李四', age: 20, type: 1 },{ name: '王五', age: 32, type: 2 },
]function getArticleTem(type) {if (type === 0) {return <div>无图</div>} else if (type === 1) {return <div>单图</div>} else if (type === 2) {return <div>双图</div>}
}function App() {return (<div>{ list.map((item, index) => <div key={index}>{getArticleTem(item.type)}</div> )}  </div>
}

6、列表渲染

const list = [{ name: '张三', age: 18, type: 0 },{ name: '李四', age: 20, type: 1 },{ name: '王五', age: 32, type: 2 },
]function App() {return (<div>{ list.map((item, index) => <div key={index}>{ item.name }</div> )}  </div>
}

7、事件绑定

function handleClick(e) {console.log(e);
}function App() {return (<div>{ list.map((item, index) => <div key={index} onClick={handleClick}>{ item.name }</div> )}  </div>
}

        自定义传参：事件绑定的位置改为箭头函数写法，不能直接在后面加参数调用

function App() {return (<div>{ list.map((item, index) => <div key={index} onClick={() => handleClick(item)}>{ item.name }</div> )}  </div>
}

        同时传递事件对象和自定义参数：

function App() {return (<div>{ list.map((item, index) => <div key={index} onClick={(e) => handleClick(item, e)}>{ item.name }</div> )}  </div>
}