chevron_left

React 实践教程

免费
第 2.5 回

教程文档

React 实践教程 - 条件渲染

2023年12月20日
React 实践教程

条件渲染

示例

e99eff8b-53d4-4dd5-91f0-50b9de111809.png

import React, {Component} from 'react'

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      show: true
    }
  }

  handleClick() {
    this.setState(state => ({
      show: !state.show
    }))
  }

  render() {
    const show = this.state.show

    return (
      <div>
        {show && <p>显示出来了</p>}...

课程介绍

「长乐未央」出品的 React 开发教程。

React 是用于构建用户界面的 JavaScript 库,起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站。做出来以后,发现这套东西很好用,就在 2013 年 5 月开源了。

由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单。所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具。

这个项目本身也越滚越大,从最早的 UI 引擎变成了一整套前后端通吃的 Web App 解决方案。衍生的 React Native 项目,目标更是宏伟,希望用写 Web App 的方式去写 Native App。如果能够实现,整个互联网行业都会被颠覆,因为同一组人只需要写一次 UI,就能同时运行在服务器、浏览器和手机。

React 主要用于构建 UI。你可以在 React 里传递多种类型的参数,如声明代码,帮助你渲染出 UI、也可以是静态的 HTML DOM 元素、也可以传递动态变量、甚至是可交互的应用组件。

  1. 声明式设计:React 采用声明范式,可以轻松描述应用。
  2. 高效:React 通过对 DOM 的模拟,最大限度地减少与 DOM 的交互。
  3. 灵活:React 可以与已知的库或框架很好地配合。

适合这样的人

有一定开发基础,最好之前学过Vue的同学