html5 函数遍历,react中类组件、函数组件、state、单层遍历、多层遍历、先遍历后渲染、if-else、三目运算符...

1、回顾

module.exports = {

entry: {},

output: {},

plugins: [],

module: {},

resolve: {},

devServe: {}

}

2、react

2.1 复制相关文件

index.html / .babelrc / package.json / webpack.config.js

删除vue相关文件

2.2 创建day02/src,修改webpack的入口文件以及@符号的目录

entry: { // object 类型写法 ---- 推荐写法

app: './day02/src/index.js' // 会将本项目打包成为一个js文件 app.js

},

resolve: {

extensions: ['.js', '.jsx'], // 代表缺省的后缀名，引入时可以省略的后缀名 --- import axios from './request'; 而不用 import axios from './request.js';

alias: { // 别名

'@': path.join(__dirname, './day02', 'src') // src 的别名为 @

}

}

3、react组件

js的语法加react的{}

src/index.js 入口文件

import React from 'react'; // 必不可少

import ReactDOM from 'react-dom'; // 将组件渲染至DOM节点

import App from './App'; // 导入组件 ---- 后缀名可以省略，配置过缺省的后缀名

// 将App 组件渲染至真实的DOM节点

// 组件使用就是标签形式，可以是双闭合标签，也可以是单闭合标签

// 组件的首字母必须大写

// 小写为HTML标签

ReactDOM.render(

,

document.getElementById('app')

)

3.1 类组件 ---- es6中的class

import React from 'react'; // 组件必须导入

// 使用es6的class实现react的组件，组件的首字母大写

// 要实现组件，必须继承React的Component

// 必须调用super()方法 ---- 类的构造方法中调用 ----- 如果组件中使用this

// 子类必须在constructor方法中调用super方法，否则新建实例时会报错

// 这是因为子类自己的this对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，加上子类自己的实例属性和方法。如果不调用super方法，子类就得不到this对象。

class Com extends React.Component {

constructor (props) { // 父类可以调用的所有的属性和方法都在props值中

super(props)

}

// render 函数 继承自父类，是react生命周期的一部分

// 返回一段HTML代码，表示当前组件的结构(相当于vue中的template)，HTML代码一般使用()包裹

// 返回的HTML结构的代码的语法 ---- jsx语法 --- javascript xml - 类xml语言

// 只有一个顶级标签

render () {

return (

hello world

)

}

}

// 暴露组件

export default Com;

3.2 函数式组件 ---- es6中的箭头函数

import React from 'react'; // 组件必须导入

// 箭头函数返回一段HTML代码

// const Com = () => {

// 业务逻辑

// return (

//

// hello react函数式组件

//

// )

// }

// 箭头函数的自带返回值，返回()表示直接返回HTML代码

const Com = () => (

hello react函数式组件-简写

)

// 暴露组件

export default Com;

3.3 什么时候使用类组件，什么时候使用函数式组件

所有的组件都可以使用类组件，含有状态(组件初始化数据)的组件必须使用类组件(暂时)

函数式组件又被称之为UI组件以及无状态组件

状态 ----- 初始化数据 ---- 类似vue中的data

4 react的状态 ---- state

4.1 设定初始化的数据

import React from 'react'; // 组件必须导入

class Com extends React.Component {

// 状态放置的位置在构造方法内

// 子类自己的this对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，加上子类自己的实例属性和方法

constructor (props) { // props父类同样的实例属性和方法

super(props);

this.state = { // react初始化数据 ---- 类似于vue中的data

msg: 'hello react + state'

}

}

render () {

return (

{ this.state.msg }

)

}

}

// 暴露组件

export default Com;

4.2 jsx注释 ---- render -> return ()

return (

{

// 111 -- 单行注释

}

{

/*

222222 --- 多行注释

*/

}

)

4.3 数据的遍历 ---- 边遍历边渲染

js的遍历，加{}变react的遍历，遍历选项返回jsx语法的结构

单层遍历

import React, { Component } from 'react'; // 解构赋值

class Com extends Component {

constructor (props) {

super(props);

this.state = {

msg: 'hello world',

list: ['aa', 'bb', 'cc', 'dd'] // ++++++++++++++

}

}

render () {

return (

{ this.state.msg }

{

// +++++++++++++++++++++++++++++++++++++++++++++++++

this.state.list.map((item, index) => {

return (

{ item }

)

})

}

)

}

}

export default Com;

多层遍历 ------ 返回的html代码必须符合jsx语法

import React, { Component } from 'react'; // 解构赋值

class Com extends Component {

constructor (props) {

super(props);

this.state = {

msg: 'hello world',

// ++++++++++++++++++++++++

list: [

{

brand: 'iphone',

arr: ['iphone6', 'iphone7', 'iphone8', 'iphonex', 'iphone11']

},

{

brand: 'huawei',

arr: ['p20', 'p30', 'meta20', 'meta30']

}

]

}

}

render () {

return (

{ this.state.msg }

{

// +++++++++++++++++++

this.state.list.map((item, index) => {

return (

{ item.brand }

{

// ***********************

item.arr.map((itm, idx) => {

return (

{ itm }

)

})

}

)

})

}

)

}

}

export default Com;

拓展 - 16版本以前

var Com = React.createClass({

initialState () {

return {

msg: ''

}

}

render () {

return ()

}

})

4.4 数据的遍历 ---- 先遍历后渲染

import React, { Component } from 'react'; // 解构赋值

class Com extends Component {

constructor (props) {

super(props);

this.state = {

msg: 'hello world',

list: ['aa', 'bb', 'cc', 'dd'],

list1: [

aaa

,

bbb

]

}

}

render () {

// ++++++++++++++++++

let arr = [];

this.state.list.map((item, index) => {

arr.push(

{ item }

)

})

// +++++++++++++++++++

return (

{ this.state.msg }

{

this.state.list

}

{ this.state.list1 }

{

// ++++++++++++++++++

arr

}

)

}

}

export default Com;

4.5 条件判断

最普通的条件判断 ---- 完全是js的语法

import React, { Component } from 'react'; // 解构赋值

class Com extends Component {

constructor (props) {

super(props);

this.state = {

flag: true

}

}

render () {

if (this.state.flag) {

return (

如果条件为真我就显示

)

} else {

return (

如果条件为假我就显示

)

}

}

}

export default Com;

三目运算符 -----

import React, { Component } from 'react'; // 解构赋值

class Com extends Component {

constructor (props) {

super(props);

this.state = {

flag: false

}

}

render () {

return (

{

// +++++++++++++++++++++++++++++++++

this.state.flag ?

真

:

假

}

)

}

}

export default Com;

5、注意事项

组件必须导入React

添加状态必须在构造方法，添加构造方法必须执行super()

不要在jsx语法中使用 if - else,可以使用三目运算、或运算、与运算

不要在jsx语法中使用 for 循环, 使用 map 循环

6、预习

自定义函数

生命周期钩子函数

修改状态

组件

组件传值