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(
  <App />,
  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 (
      <div>
        hello world
      </div>
    )
  }
}

// 暴露组件
export default Com;

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

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

// 箭头函数返回一段HTML代码
// const Com = () => {
//  业务逻辑
//   return (
//     <div>
//       hello react函数式组件
//     </div>
//   )
// }

// 箭头函数的自带返回值，返回()表示直接返回HTML代码
const Com = () => (
  <div>
    hello react函数式组件-简写
  </div>
)

// 暴露组件
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 (
      <div>
        { this.state.msg }
      </div>
    )
  }
}
// 暴露组件
export default Com;

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

return (
  <div>
    {
      // 111 -- 单行注释
    }
    {
      /*
      222222   --- 多行注释
      */
    }
  </div>
)

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 (
      <div>
        { this.state.msg }
        {
          // +++++++++++++++++++++++++++++++++++++++++++++++++
          this.state.list.map((item, index) => {
            return (
              <p key={ index }>
                { item }
              </p>
            )
          })
        }
      </div>
    )
  }
}

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 (
      <div>
        { this.state.msg }
        {
          // +++++++++++++++++++
          this.state.list.map((item, index) => {
            return (
              <div key={ index }>
                <h1>{ item.brand }</h1>
                {
                  // ***********************
                  item.arr.map((itm, idx) => {
                    return (
                      <p key = { idx }>{ itm }</p>
                    )
                  })
                }
              </div>
            )
          })
        }
      </div>
    )
  }
}

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: [<p key="1">aaa</p>, <p key="2">bbb</p>]
    }
  }

  render () {
    // ++++++++++++++++++
    let arr = [];
    this.state.list.map((item, index) => {
      arr.push(
        <p key={ index }> { item } </p>
      )
    })
    // +++++++++++++++++++
    return (
      <div>
        { this.state.msg }
        {
          this.state.list
        }
        { this.state.list1 }
        {
          // ++++++++++++++++++
          arr
        }
      </div>
    )
  }
}

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 (
        <div>
          如果条件为真我就显示
        </div>
      )
    } else {
      return (
        <div>
          如果条件为假我就显示
        </div>
      )
    }
  }
}

export default Com;

• 三目运算符 -----

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

class Com extends Component {
  constructor (props) {
    super(props);
    this.state = {
      flag: false
    }
  }

  render () {
    return (
      <div>
        {
          // +++++++++++++++++++++++++++++++++
          this.state.flag ? <p>真</p> : <p>假</p>
        }
      </div>
    )
  }
}

export default Com;

5、注意事项

• 组件必须导入React

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

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

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

6、预习

• 自定义函数

• 生命周期钩子函数

• 修改状态

• 组件

• 组件传值