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、预习
-
自定义函数
-
生命周期钩子函数
-
修改状态
-
组件
-
组件传值
长风破浪会有时，直挂云帆济沧海
