JSX简介

2022-08-11 20:02:37 阅读：174 来源： 互联网

两组组件定义

类组件(class组件)

特点：用ES6面向对象语法，有生命周期，有this,有state，有上下文，有ref，永远不能使用Hooks.

缺点：相对函数组件，类组件性能相对较差。

class A extends Component {
  constructor (props) {
    super(props)
    // 定义声明式变量
    this.state = {
      num: 1
    }
  }
  componentDidMount () {
    console.log('---页面渲染完成')
    this.refs.box.style.color = 'red'
  }
  componentDidUpdate () {
    console.log('---页面更新完成')
  }
  add () {
    this.setState((state)=>({num: state.num+1}))
  }
  // 成员方法
  render () {
    console.log('---render/rerender')
    console.log('---props', this.props)
    const { num } = this.state
    // 返回视图模板（JSX）
    return (
      <h1 ref='box'>类组件 {num} <span onClick={()=>this.add()}>自增</span></h1>
    )
  }
}

export default A

函数组件（自React诞生之初就有的写法）

特点：用函数编程，没有生命周期，没有state，没有this，没有上下文，没有ref，自React(16.8)版本之后可以使用Hooks，可以使用Hooks API在函数组件模拟没有生命周期，没有state，没有this，没有上下文，没有ref缺失的特性。

优点：相对于类组件，性能更好。

注意：无论是类组件还是函数组件，都有props(父子通信的纽带)，在类组件中使用this.props访问，在函数组件中它的入参就是props。

注意：在React(16.8)之前是没有Hooks的，在React(16.8)之后才新增的Hooks。

function B (props) {
  console.log('---props', props)
  // 模拟state声明变量
  const [num, setNum] = useState(1)
  // 使用ref
  const box = useRef(null)
  // 模拟生命周期
  useEffect(()=>{
    console.log('---页面渲染/更新完成')
    if (num === 1) {
      box.current.style.color = 'blue'
    }
  }, [num])

  return (
    <h1 ref={box}>函数式组件 {num} <span onClick={()=>setNum(num+10)}>自增</span></h1>
  )
}

export default B

理解jsx语法

JSX(JavaScript XML)语法，由Facebook发布的，浏览器是不支持这种语法。
在编写React组件视图结构时，JSX是可选的，可以使用React.createElement('tag',{},[]编写视图结构)官方推荐使用JSX。
JSX语法最终会被@babel/preset-react进行编译，编译的结果就是React.createElement()语法。
JSX元素：本质上就是React.createElement()的返回值，是变量，也是对象，并且是不可变的对象。
为什么JSX元素是不可变对象？因为JSX元素最终会被渲染成真实DOM，所以不能直接操作“原材料”，而是只能使用声明式变量。
什么是元素？由JSX语法或React.createElement()返回的结果叫做元素，元素就是组件实例化的对象。
什么是组件？由class或function定义的东西叫做组件。

深入理解JSX语法细节

在JSX可以嵌套表达式，使用{}来嵌套，在JSX视图中凡是动态的变量（表达式）都使用{}包裹起来。
JSX是变量，也是表达式，所以JSX元素可以作为函数的入参，也可以作为函数的返回值，还可以用在if或for循环中。
JSX语法三个变化属性：className(class)，tabIndex(tabindex)，htmlFor(for)
JSX语法新增的三个属性：key(用于列表渲染)，ref(快捷的Dom方式)，dangerouslySetInnerHTML(用于渲染HTML片段)
内联style语法： <div style={{ cssKey1: 'cssValue1', cssKey2: 'cssValue2' }} />
className语法： <div className='box' className={`${cc} ff`} />
在JSX中，使用{}渲染后端接口数据，默认支持反注入攻击（XSS）
JSX是对象，因为JSX变量是React.createElement()的返回值，这个返回值就是对象结构，所以JSX是对象。这中JSX对象就是"Fiber单元"，很多嵌套“Fiber单元”就构成了“Fiber树”（双向链表）。
JSX支持点语法： React.Componenet、<React.Fragment />、<Qf.Button />
在JSX中，向子组件传递props时，支持属性展开语法 <Child {...cPorps} />
在使用自定义组件时，哪些被自定义组件所嵌套的内容，在子组件中使用props.children来接收。props.children可以说基本数据类型，引用数据类型，函数。
在JSX中默认可以支持对数组直接渲染 <div>{ [<div />, true, null, 100, {a:1,b:2}, [1,2,3]] }</div>

在JSX中，使用{}渲染Boolean，null，undefined都会被忽略。以下显示的结果相同。

<div />

<div></div>

<div>{false}</div>

<div>{null}</div>

<div>{undefined}</div>

<div>{true}</div>

标签：语法,简介,React,num,props,组件,JSX
来源： https://www.cnblogs.com/wang622/p/16576993.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

JSX简介

两组组件定义

理解jsx语法

深入理解JSX语法细节