jsx简介

语法规则

1. 定义虚拟DOM时，不要写引号
2. 标签中混入JS表达式时要用{}
3. 样式的类名指定不要用class，要用className
4. 内联样式，要用style={{key:value}}的形式写
5. 只能有一个根标签
6. 标签必须闭合

代码实例

export default function CardPage() {
  const aGoods = [
      {id:1,title:"潮流女装"},
      {id:2,title:"品牌男装"},
      {id:3,title:"手机电脑"}
  ]
  const myStyle = {
    fontSize: 100,  //等价于fontSize: '100px',
    color: '#00ff00'
  }
  const myClass = 'demo-ul'
  return (
    <ul className={myClass} style={myStyle}> {/* 1.表达式以及变量名需用‘{}’包裹 */}
        {   
          aGoods.map((item,index)=>{ // 2.数组遍历渲染
            return ( // 3.jsx内部条件判断不能使用if-else,使用三元表达式          
                <li key={index}>{item.id ? item.title : '默认商品名'}</li> 
            )        
          })    
        }
    </ul>
  );
}

核心概念

• 组件（Components）
• 参数（Props）
• 状态（State）

组件（Components）

• 函数式组件 function (只有props)
• 类组件 class(有props，state，生命周期钩子)

有了hook建议使用函数式组件

书写形式

函数式组件

// 无hook
function DemoFunction(props) {
  const { text } = props // 组件传值
  return (
    <div className="demoFunction">
      <p>{`function 组件所接收到的来自外界的文本内容是：[${text}]`}</p>
    </div>
  );
}


// 有hook，实现计数器,hook后面会细讲
import React,{ useState } from "react";
const NewCount = ()=> {
    //useState（hook）用于为函数组件引入state状态, 并进行状态数据的读写操作
    const [ count,setCount ] = useState(0) 
    addCount = ()=> {
        let newCount = count;
        setCount(newCount +=1)
    }
   return (
       <>
           <p> { count }</p>
           { /* 事件名为驼峰命名 */ }
           <button onClick={ addCount }>Count++</button>
       </>
   )
}
export default NewCount

类组件

//实现计数器
import React, {Component} from "react";
class AddCount extends Component {
    constructor(props) { // props组件传值，单项数据流
        super(props);
        this.state = { // state，组件状态值
            count : 0
        }
    }
    addcount = () => {
        let newCount = this.state.count;
        //setState 修改组件状态,更新数据和视图，会重新调用render函数
        this.setState({
            count: newCount += 1
        })
    }
    render() {
        return (
            <>
                <p>{ this.state.count }</p>
                <button onClick={ this.addcount }>count++</button>
            </>
        )
    }
}
export default AddCount;

总结

• 类组件有生命周期，函数组件没有
• 类组件需要继承 Class，函数组件不需要
• 类组件可以获取实例化的 this，并且基于 this 做各种操作，函数组件不行
• 类组件内部可以定义并维护 state， 函数组件为无状态组件（可以通过hooks实现）

参数（Props)

概念以及用途：props 是组件对外的接口。父组件的属性和方法通过props传递

基础用法

现有两个组件：<ItemList/> 和 <Item/>

<ItemList/>

import Item from "./item";
export default class ItemList extends React.Component{
  render(){
    return (
       <div>
         <Item data="我是props值"/>,
       </div>
    )
  }
}

<Item/>

// 通过this.props.data取值
export default class Item extends React.Component{
  render(){
    return (
      <h1>{this.props.data}</h1>
    )
  }
}

总结

单项数据流，只读不可更改

状态（State）

概念以及用途：props 是组件对内的接口。组件内部使用，为了响应式展示ui

基础用法

import React, {Component} from "react";
class AddCount extends Component {
    constructor(props) { // props组件传值，单项数据流
        super(props);
        // 写法1
        this.state = { // state，组件状态值
            count : 0
        }
    }
   // 写法2
   state = {
     count : 0
   }
    addcount = () => {
        let newCount = this.state.count;
        //setState 修改组件状态,更新数据和视图，会重新调用render函数
        this.setState({
            count: newCount += 1
        })
    }
    render() {
        return (
            <>
                <p>{ this.state.count }</p>
                <button onClick={ this.addcount }>count++</button>
            </>
        )
    }
}
export default AddCount;

使用场景

state 中的所有状态都是用于反映组件UI的变化，普通变量不要定义为state

修改State

• 通过this.setState(obj,cb)修改,obj需要被修改的键值对，cb在组件重新渲染时被调用
• this.setState(),会触发render，更新视图
• State 的更新是异步的，调用 setState，组件的 state 并不会立即改变，setState 只是把要修改的状态放入一个队列中。因此不能依赖当前的 state，计算下个 state

总结

• state 是在组件中创建的，一般在 constructor 中初始化 state
• state 是多变的、可以修改，每次 setState 都异步更新的。