react的jsx基础语法
react的jsx基础语法
复制 public文件夹、.babelrc、webpack.config.js、package.json，删除vue相关的模块，安装依赖
import React from 'react';
import ReactDOM from 'react-dom';
function getTime () {
const time = new Date()
const element = (
<h1>
现在是北京时间： { time.toLocaleTimeString() }
</h1>
)
ReactDOM.render(element, document.querySelector('#app'))
}
setInterval(getTime, 1000)
- 疑问：element 元素的这种写法叫什么？
React jsx
React 使用 JSX 来代替常规的js
JSX 就是看起来很像是 XML 的js语法扩展
- 必须得使用jsx吗？
JSX 执行高效，因为它在编译为js代码后进行了优化
类型安全，在编译过程中就能发现错误
使用 jsx 编写模板更加的简单快速
- 疑问：HTML标签的属性是不是可以随便的添加呢？
因为jsx其实就是js，一些标识 如 class 和 for 不建议作为xml属性名（class 是类的关键字，for是循环的关键字），作为代替，ReactDOM 中使用 className 和 htmlFor 来对应 class和for
className 和 htmlFor
js表达式
vue {{ 1 + 1 }} ==> 2
react { 1 + 1 } ==> 2
三目运算......
如何写行内样式
import React from 'react';
import ReactDOM from 'react-dom';
// <div style="width: 100%;min-height: 600px;background-color: #f66">// The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.// react 就是 js + {}const element = (
<div style={ {
width: '100%',
minHeight: '600px',
backgroundColor: '#f66'
} }>
<div>
<label htmlFor="username">用户名</label>
<input id="username" />
</div></div>
)
ReactDOM.render(element, document.querySelector('#app'))
import React from 'react';
import ReactDOM from 'react-dom';
const style = {
width: '100%',
minHeight: '600px',
backgroundColor: '#f66'
}
const inputStyle = {
textIndent: '12px'
}
const element = (
<div style={ style }>
<div>
<label htmlFor="username">用户名</label>
<input id="username" style={ inputStyle } placeholder="请输入用户性"/>
</div>
</div>
)
ReactDOM.render(element, document.querySelector('#app'))
import React from 'react';
import ReactDOM from 'react-dom';
const styleObj = { // 可以把啊抽离成为一个单独的文件
style1: {
width: '100%',
minHeight: '600px',
backgroundColor: '#f66'
},
style2: {
textIndent: '12px'
}
}
const element = (
<div style={ styleObj.style1 }>
<div>
<label htmlFor="username">用户名</label>
<input id="username" style={ styleObj.style2 } placeholder="请输入用户性"/>
</div>
</div>
)
ReactDOM.render(element, document.querySelector('#app'))
jsx注释写法
注释要写在 {} 中
单行注释
多行注释
数组
import React from 'react';
import ReactDOM from 'react-dom';
// 如果数组的元素就是 react 元素 / react 组件
// 添加key属性 保证唯一性
const arr = [
<h1 key="0">react课程</h1>,
<h1 key="1">react数组</h1>
]
// jsx 允许在模板中插入数组，数组会自动展开所有的成员
// js + {}
const element = (
<div>
{ arr }
</div>
)
ReactDOM.render(element, document.querySelector('#app'))
react 组件
函数式组件 --- 使用的js的函数
类组件 --- 使用es6的类
函数式组件
又被称之为UI组件，无状态组件
只负责数据的渲染
import React from 'react';
import ReactDOM from 'react-dom';
// 组件的首字母必须大写，如果是小写，就会被当做是普通的html标签，如果没有这个标签，则不会渲染// 函数式组件 --> 函数 返回了一段jsx代码// 普通函数// function HelloWorld () {// return (// <div>hello world</div>// )// }// // 使用箭头函数// const HelloWorld = () => {// return (// <div>hello world 箭头函数</div>// )// }// 使用箭头函数 - 简写形式const HelloWorld = () => (
<div>hello world 箭头函数,简写形式</div>
)
// ReactDOM.render(<HelloWorld></HelloWorld>, document.querySelector('#app'))
ReactDOM.render(<HelloWorld />, document.querySelector('#app'))
类组件
万能组件
使用 es6 中的类来实现组件
import React from 'react';
import ReactDOM from 'react-dom';
// 使用es6的类的 继承 来将一个普通的类 转换成为一个react的类组件// 必须使用 继承自父类的方法 render，返回一段jsx代码class HelloWorld extends React.Component {
render () {
return (
<div>HelloWorld</div>
)
}
}
ReactDOM.render(<HelloWorld />, document.querySelector('#app'))
组件的导入与导出
vue 定义组件 导出组件 导入组件 注册组件 使用组件
react 定义组件 导出组件 导入组件 使用组件
如果是函数式组件呢？
组件状态
函数式组件 / 类组件
函数式组件又被称之为 无状态组件 ---- 类组件
回顾es6的类以及继承
class Student {
// 构造方法 this 代表当前的实例
// constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor方法，如果没有显式定义，一个空的constructor方法会被默认添加。
constructor (age,username) {
this.age = age
this.username = username
}
run () {
console.log(this.username + '跑步')
}
}
// const stu = new Student(18, '吴大勋')// stu.run()
// Class 可以通过extends关键字实现继承，这比 ES5 的通过修改原型链实现继承，要清晰和方便很多// Pupil 和 Student 类一模一样// class Pupil extends Student {}// const stu = new Pupil(18, '吴大勋')// stu.run()
// 子类添加自己的属性和方法class Pupil extends Student {
constructor (age, username, hobby) {
// super 表示父类的构造函数，用来新建父类的this对象
// 子类必须在constructor方法中调用super方法，否则新建实例时会报错
// 因为子类自己的this对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，加上子类自己的实例属性和方法。如果不调用super方法，子类就得不到this对象。
// ES5 的继承，实质是先创造子类的实例对象this，然后再将父类的方法添加到this上面（Parent.apply(this)）。 -- 我是马云的爸爸
// ES6 的继承机制完全不同，实质是先将父类实例对象的属性和方法，加到this上面（所以必须先调用super方法），然后再用子类的构造函数修改this。 -- 我爸是李刚
super(age, username)
this.hobby = hobby
}
run () {
console.log(this.username + '玩' + this.hobby)
}
}
const stu = new Pupil(18, '吴大勋', '篮球')
stu.run()
组件状态
import React from 'react';
// 组件的状态class HelloWorld extends React.Component {
constructor (props) {
super(props); // 继承了父类的属性和方法
// 添加状态 - 得到与父类同样的实例属性和方法，然后再对其进行加工，加上子类自己的实例属性和方法
this.state = { // 添加当前组件的状态 ---- 类似于vue的data
message: 'hello react'
}
}
render () {
return (
<div>
<h1>react的组件状态</h1>
{ this.state.message }
</div>
)
}
}
export default HelloWorld
组件列表渲染 - 单层遍历
map方法会返回一个数组，react会默认展开数组
import React from 'react';
// 如果返回一段jsx代码，建议使用()包裹
// 组件的状态class HelloWorld extends React.Component {
// 要不不写constructor，要写必写super()
// 要写状态就写 constructor
constructor (props) {
super(props);
this.state = {
message: 'hello react',
list: ['HTML5', 'JAVAEE', 'PYTHON', '物联网', '测试', '大数据', '云计算', 'UI']
}
}
render () {
return (
<div>
<h1>react的组件状态</h1>
{ this.state.message }
<h2>本次联合项目参与的学科有</h2>
{ this.state.list }
<ul>
{
// react 使用 map 遍历数据（通用）
this.state.list.map((item, index) => {
// item 代表的数据的每一个元素
// index 代表索引值
// 返回一段遍历之后的JSX语法代码
// 遍历必写key，key具有唯一性 跟vue思想中保持一致
return (<li key={ index }>{ item }</li>)
})
}
</ul>
</div>
)
}
}
export default HelloWorld
组件列表渲染 - 多层遍历
import React from 'react';
// 如果返回一段jsx代码，建议使用()包裹
// 组件的状态class HelloWorld extends React.Component {
// 要不不写constructor，要写必写super()
// 要写状态就写 constructor
constructor (props) {
super(props);
this.state = {
list: [
{
course: 'HTML5',
arr: ['vue开发工程师', 'react开发工程师', '小程序开发工程师']
},
{
course: 'UI',
arr: ['WEB前端', '平面设计', '移动端设计']
}
]
}
}
render () {
return (
<div>
<h1>react的组件遍历-多层</h1>
<ul>
{
this.state.list.map((item, index) => {
return (<li key={ index }>
{ item.course } 可以从事以下工作：
<ol>
{
item.arr.map((itm, idx) => {
return (
<li key={ idx }> { itm } </li>
)
})
}
</ol>
</li>)
})
}
</ul>
</div>
)
}
}
export default HelloWorld
条件判断
react 的条件判断实际上就是js的条件判断
import React from 'react';
class HelloWorld extends React.Component {
constructor (props) {
super(props);
this.state = {
flag: false
}
}
render () {
// vue 中 v-if,react没有指令
// react 的条件判断实际上就是js的条件判断
if (this.state.flag) {
return (
<div>
<h1>react的组件遍历-条件判断</h1>
真真真
</div>
)
} else {
return (
<div>
<h1>react的组件遍历-条件判断</h1>
假假假
</div>
)
}
}
}
export default HelloWorld
判断变化
import React from 'react';
class HelloWorld extends React.Component {
constructor (props) {
super(props);
this.state = {
flag: false
}
}
render () {
// vue 中 v-if,react没有指令
// react 的条件判断实际上就是js的条件判断
// 可以根据业务需求简化代码 --- 变量可以当做react元素
// let str = ''
// if (this.state.flag) {
// str = '真真真111'
// } else {
// str = '假假假222'
// }
// const str = this.state.flag ? '真真真111' : '假假假222'
// switch case
return (
<div>
<h1>react的组件遍历-条件判断</h1>
{
// str
this.state.flag ? '真真真111' : '假假假222'
}
</div>
)
}
}
export default HelloWorld
---------------------------------------------------------------------------------------文章来自吴大勋（大勋哥）
浙公网安备 33010602011771号