1.2-JSX语法

Create by fall on 24 Dec 2021 Recently revised in 30 Aug 2024

JSX

JSX 只是将 html 经过一层简单的包装，将 JS 和 HTML 结合在一起的语法糖

React.createElement(component,props,...children)

JSX 代码

// 代码1
<MyButton color="blue" shadowSize={2}>click me</MyButton>
// 代码2
<div className="cheers"/>

会被编译为

// 编译后代码1
React.createElement(
	MyButton,
  {color:'blue',shadowSize:2},
  'click me'
)
// 编译后代码2
React.createElement(
	'div',
  {className:'cheers'}
)

React 在 17 以后，不必须在作用域内调用

import React from 'react';
import CustomButton from './CustomButton';

function WarningButton() {
  // return React.createElement(CustomButton, {color: 'red'}, null)
  return <CustomButton color="red" />;
}

点类型语法

import React from 'react'
const MyComponent = {
  Element:function(){
    return(<div>Where should I go?</div>)
  }
}
function ExtraComponent(){
  return <MyComponent.Element color="blue"/>
}

属性展开

// 用展开运算符来传递整个 props 对象
function AppL(){
  return <Greed firstName="vcvvc" lastName='chock'></Greed>
}
// 等价于上面的
function AppR(){
  const props = {
    firstName:'vcvvc',
    lastName:'chock'
  }
  return <Greed ...props></Greed>
}

把当前组件用到的值都留下，其他的值都传递给子组件

// 子组件
function Child(props){
  const {color,...other} = props
  // 在这里使用color后，然后把其他数据传递给子组件的子组件
  return <OtherCopmponent ...other></OtherCopmponent>
}
// 父组件
function Father(){
  return <Child color="pink" style="wild"></Child>
}

中间的子元素

// 如果把字符串放在开始和结束标签之间，props.children 就只是该字符串
<MyComponent>来了？老弟？</MyComponent>
// 要注意的是：哪怕是用了多行，或者是多个空格也会被压缩为一行，第一行和最后一行的空格会被忽略
// 以下书写方式等价
// 1
<div>Hello World</div>
// 2
<div>
  Hello World
</div>
// 3
<div>
  Hello
  World
</div>
<div>

  Hello World
</div>

子元素为 JSX

<MyContainer>
  <MyFirstComponent />
  <MySecondComponent />
</MyContainer>

子元素为表达式

当表达式为字符串的时候

<MyComponent>capital</MyComponent>
// 两者是等价的
<MyComponent>{'capital'}</MyComponent>

注：false, null, undefined, and true 是合法的子元素。但它们并不会被渲染。如果想渲染它们，要先把她们转换为字符串

数组子元素

// 当子元素为数组时，也会进行多次调用
const optionList =['create','move','lie','impress']
function Option(props){
  return (<li key={props.moo}>{props.moo}</li>)
}
function OptionList(){
  return (<ul>
    {optionList.map(item=><Option moo={item}></Option>)}
    </ul>)
}

总结

JSX 只是作为 React 的语法糖
只要有 react 组件就必须引入 react，React 必须在作用域内
React 支持点类型语法
用户定义的组件必须以大写字母开头
Prop 值默认为 true

浅浅对比一下 vue 的 SFC，jsx 有哪些舒适的地方。

SFC 中会出现这种情况，只有四五行代码，却使用了两次，你想复用，你需要写一个只有四五行 template 的 .vue 文件。

而 jsx 中，遇到同样的问题，只需要创建一个 function，返回值是这四五行内容就可以了，写代码，零碎的几行内容，复用起来非常舒适。并且可以写在一个文件里面，而 SFC 就需要拆分为多个文件。

参考文章

文章名称	链接
react 官方文档	https://reactjs.org
俊劫	https://juejin.cn/post/6960556335092269063

JSX​

点类型语法​

属性展开​

中间的子元素​

数组子元素​

总结​

参考文章​

JSX

点类型语法

属性展开

中间的子元素

数组子元素

总结

参考文章