柠檬小窝

外观

本页目录

React JSX 语法 - 构建动态 UI 的魔法 ​

简介 ​

JSX（JavaScript XML）是 React 的一种特殊语法扩展，它允许我们在 JavaScript 代码中编写类似于 HTML 的标记，从而使得构建动态 UI 变得更加直观和简洁。JSX 在 React 中扮演着非常重要的角色，它是 React 元素的创建和组合的基础，是构建复杂用户界面的核心。

JSX 原理 ​

JSX 并不是直接由浏览器理解的语法，而是通过 Babel 等工具进行转换后，再变成普通的 JavaScript 代码。这个转换过程将 JSX 转换为React.createElement()函数的调用，从而创建 React 元素。

例如，下面的 JSX 代码：

jsx
const element = <h1>Hello, JSX!</h1>

将被转换为以下 JavaScript 代码：

js
const element = React.createElement('h1', null, 'Hello, JSX!')

可以看到，JSX 代码被转换为了一个函数调用，第一个参数是标签名，第二个参数是属性对象（在这个例子中为空），第三个参数是标签内容。这个过程使得 React 可以根据 JSX 的描述来创建相应的 React 元素。

基本语法规则 ​

1. 标签 ​

在 JSX 中，我们可以像写 HTML 标签一样写 React 组件的标签。标签可以是 HTML 标签，也可以是自定义的 React 组件。

jsx
const element = <div>JSX Syntax</div>
const customElement = <MyComponent />

2. 属性 ​

在 JSX 中，可以通过属性来传递数据给组件。属性的写法与 HTML 标签类似，使用key=value的形式。

jsx
const element = <input type="text" placeholder="Enter your name" />

3. 嵌套 ​

JSX 支持标签的嵌套，可以将多个标签组合在一起形成复杂的 UI 结构。

jsx
const element = (
  <div>
    <h1>JSX Syntax</h1>
    <p>Learn about JSX</p>
  </div>
)

4. 表达式 ​

在 JSX 中，可以在大括号内使用 JavaScript 表达式。这样可以在 UI 中插入动态的内容。

jsx
const name = 'John'
const element = <p>Hello, {name}!</p>

5. 注释 ​

JSX 支持在大括号内使用 JavaScript 注释。

jsx
const element = (
  <div>
    {/* This is a comment */}
    <h1>JSX Syntax</h1>
  </div>
)

JSX 中的组件化开发 ​

JSX 在 React 中的最大价值在于支持组件化开发。通过组件化开发，我们可以将 UI 拆分成独立的、可复用的组件，从而使得代码结构更加清晰和易于维护。组件是 React 中最基本的概念之一，也是构建现代 Web 应用程序的核心。

函数组件 ​

函数组件是一种简单的声明式组件，它是一个纯函数，接受一个 props 对象作为参数，并返回一个描述 UI 的 React 元素。

jsx
function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>
}

类组件 ​

类组件是一种功能更强大的组件，它是一个 ES6 类，继承自React.Component，并且具有状态和生命周期方法。

jsx
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>
  }
}

组件的使用 ​

使用组件时，我们可以像使用 HTML 标签一样使用组件的标签。将属性传递给组件，可以在组件中获取这些属性并进行相应的渲染。

jsx
const element = <Welcome name="John" />

JSX 中的条件渲染 ​

JSX 支持条件渲染，即根据条件来决定是否渲染组件或显示不同的内容。可以使用 JavaScript 的条件语句（如 if 和三元表达式）来控制组件的渲染逻辑。

使用 if 语句 ​

jsx
function Greeting(props) {
  if (props.isLoggedIn) {
    return <h1>Welcome back!</h1>
  } else {
    return <h1>Please sign up!</h1>
  }
}

使用三元表达式 ​

jsx
function Greeting(props) {
  return props.isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign up!</h1>
}

JSX 中的列表渲染 ​

在 React 中，我们经常需要渲染数据列表，比如商品列表、评论列表等。JSX 提供了方便的方式来实现列表渲染。

使用 map 方法 ​

jsx
function ProductList(props) {
  const products = props.products
  return (
    <ul>
      {products.map((product) => (
        <li key={product.id}>{product.name}</li>
      ))}
    </ul>
  )
}

JSX 中的表单处理 ​

处理用户输入的表单数据是 Web 应用程序中的常见任务。在 React 中，我们可以通过对表单元素的事件监听和状态更新，来收集用户的输入并实时更新组件的状态。

jsx
class FormExample extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      name: '',
      email: ''
    }
  }

  handleChange(event) {
    this.setState({
      [event.target.name]: event.target.value
    })
  }

  render() {
    return (
      <form>
        <input
          type="

text"
          name="name"
          value={this.state.name}
          onChange={this.handleChange.bind(this)}
        />
        <input
          type="email"
          name="email"
          value={this.state.email}
          onChange={this.handleChange.bind(this)}
        />
      </form>
    )
  }
}

JSX 中的状态提升 ​

状态提升是一种在 React 中共享状态的技术，允许将共享的状态提升到共同的父组件，实现组件之间的数据共享。

jsx
function TemperatureConverter() {
  const [celsius, setCelsius] = useState('')
  const [fahrenheit, setFahrenheit] = useState('')

  function handleCelsiusChange(value) {
    setCelsius(value)
    setFahrenheit(value * 1.8 + 32)
  }

  function handleFahrenheitChange(value) {
    setFahrenheit(value)
    setCelsius((value - 32) / 1.8)
  }

  return (
    <div>
      <TemperatureInput scale="c" value={celsius} onChange={handleCelsiusChange} />
      <TemperatureInput scale="f" value={fahrenheit} onChange={handleFahrenheitChange} />
    </div>
  )
}

JSX 中的高阶组件（HOC） ​

高阶组件（HOC）是一种在 React 中实现组件的复用逻辑的技术。HOC 是一个函数，接受一个组件作为参数，并返回一个新的组件。

jsx
function withLogger(WrappedComponent) {
  return class extends React.Component {
    componentDidMount() {
      console.log('Component has mounted!')
    }

    render() {
      return <WrappedComponent {...this.props} />
    }
  }
}

const MyComponent = () => <div>Hello, HOC!</div>
const MyComponentWithLogger = withLogger(MyComponent)

JSX 中的上下文（Context） ​

React 的上下文允许在组件树中共享数据，而不必通过 props 一层层传递。上下文提供了一种便捷的方式来在组件之间共享数据，尤其对于跨多层级的组件共享数据非常有用。

jsx
const ThemeContext = React.createContext('light')

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  )
}

function Toolbar() {
  return (
    <div>
      <ThemedButton />
    </div>
  )
}

function ThemedButton() {
  const theme = useContext(ThemeContext)
  return <button style={{ background: theme }}>Click me</button>
}

JSX 中的 Hooks ​

Hooks 是 React 16.8 引入的新特性，用于在函数组件中添加状态、副作用和其他 React 特性。通过 Hooks，我们可以在函数组件中使用类组件的功能，如状态管理、生命周期方法等。

jsx
function Counter() {
  const [count, setCount] = useState(0)

  function handleIncrement() {
    setCount(count + 1)
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleIncrement}>Increment</button>
    </div>
  )
}
Copyright © 2023-present lemon

lemon's personal blog.

Copyright © 2023-present lemon/lining