×

react

react定义

用于构建用户界面的 JavaScript

声明式

React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图,当数据改变时 React 能有效地更新并正确地渲染组件。

以声明式编写 UI,可以让你的代码更加可靠,且方便调试。

组件化

创建拥有各自状态的组件,再由这些组件构成更加复杂的 UI。

组件逻辑使用 JavaScript 编写而非模版,因此你可以轻松地在应用中传递数据,并使得状态与 DOM 分离。

一次学习,随处编写

无论你现在正在使用什么技术栈,你都可以随时引入 React 来开发新特性,而不需要重写现有代码。

React 还可以使用 Node 进行服务器渲染,或使用 React Native 开发原生移动应用。

简单组件

React 组件使用一个名为 render() 的方法,接收输入的数据并返回需要展示的内容。在示例中这种类似 XML 的写法被称为 JSX。被传入的数据可在组件中通过 this.props 在 render() 访问。

使用 React 的时候也可以不使用 JSX 语法。尝试使用 Babel REPL,了解 JSX 被编译成原生 JavaScript 代码的步骤。

class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        Hello {this.props.name}
      </div>
    );
  }
}

ReactDOM.render(
  <HelloMessage name="Taylor" />,
  document.getElementById('hello-example')
);

有状态组件

除了使用外部数据(通过 this.props 访问)以外,组件还可以维护其内部的状态数据(通过 this.state 访问)。当组件的状态数据改变时,组件会再次调用 render() 方法重新渲染对应的标记。

class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { seconds: 0 };
  }

  tick() {
    this.setState(state => ({
      seconds: state.seconds + 1
    }));
  }

  componentDidMount() {
    this.interval = setInterval(() => this.tick(), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    return (
      <div>
        Seconds: {this.state.seconds}
      </div>
    );
  }
}

ReactDOM.render(
  <Timer />,
  document.getElementById('timer-example')
);

应用

使用 props 和 state,我们可以创建一个简易的 Todo 应用。在示例中,我们使用 state 来保存现有的待办事项列表及用户的输入。尽管事件处理器看似被内联地渲染,但它们其实只会被事件委托进行收集和调用。

class TodoApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = { items: [], text: '' };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  render() {
    return (
      <div>
        <h3>TODO</h3>
        <TodoList items={this.state.items} />
        <form onSubmit={this.handleSubmit}>
          <label htmlFor="new-todo">
            What needs to be done?
          </label>
          <input
            id="new-todo"
            onChange={this.handleChange}
            value={this.state.text}
          />
          <button>
            Add #{this.state.items.length + 1}
          </button>
        </form>
      </div>
    );
  }

  handleChange(e) {
    this.setState({ text: e.target.value });
  }

  handleSubmit(e) {
    e.preventDefault();
    if (this.state.text.length === 0) {
      return;
    }
    const newItem = {
      text: this.state.text,
      id: Date.now()
    };
    this.setState(state => ({
      items: state.items.concat(newItem),
      text: ''
    }));
  }}class TodoList extends React.Component {
  render() {
    return (
      <ul>
        {this.props.items.map(item => (
          <li key={item.id}>{item.text}</li>
        ))}
      </ul>
    );
  }}ReactDOM.render(
  <TodoApp />,
  document.getElementById('todos-example'));

在组件中使用外部插件

React 允许你结合其他框架或库一起使用。示例中使用了一个名为 remarkable 的外部 Markdown 库。它可以实时转换 <textarea> 里的内容。

class MarkdownEditor extends React.Component {
  constructor(props) {
    super(props);
    this.md = new Remarkable();
    this.handleChange = this.handleChange.bind(this);
    this.state = { value: 'Hello, **world**!' };
  }

  handleChange(e) {
    this.setState({ value: e.target.value });
  }

  getRawMarkup() {
    return { __html: this.md.render(this.state.value) };
  }

  render() {
    return (
      <div className="MarkdownEditor">
        <h3>Input</h3>
        <label htmlFor="markdown-content">
          Enter some markdown
        </label>
        <textarea
          id="markdown-content"
          onChange={this.handleChange}
          defaultValue={this.state.value}
        />
        <h3>Output</h3>
        <div
          className="content"
          dangerouslySetInnerHTML={this.getRawMarkup()}
        />
      </div>
    );
  }
}

ReactDOM.render(
  <MarkdownEditor />,
  document.getElementById('markdown-example')
);

关于"react"的文章

  • React:了解受控组件和非受控组件

    Js&JQuery Posted by abc123 2022.03.16 views: 966 评论:0

    React:了解受控组件和非受控组件。非受控组件表单数据由DOM本身处理。即不受setState()的控制,与传统的HTML表单输入相似,input输入值即显示最新值(使用ref从DOM获取表单值)1.非受控组件...

    Tags: react

  • React:基于React Hooks的小型状态管理

    React Posted by Web前端之家 2022.02.28 views: 1532 评论:0

    React:基于ReactHooks的小型状态管理。React组件间的状态共享,是一个老生常谈的问题,也有很多解决方案,例如Redux、MobX等。这些方案很专业,也经历了时间的考验,但私以为他们不太适合一些不算复杂的项目,反而会引入一些额外的复杂度。...

    Tags: react

  • react每日一学:聊聊fetch之cors跨域请求的应用

    React Posted by abc123 2021.11.29 views: 2843 评论:0

    react每日一学:聊聊fetch之cors跨域请求的应用。项目中使用了react,当中需要使用fetch来代替ajax。由于react的create_react_app工具很方便,基本上开箱即用,经过创建项目,输入npmstart命令后,便自动监听一个30...

    Tags: reactfetch跨域

  • react每日一学:学习下react-navigation 如何判断用户是否登录跳转到登录页的方法

    Js&JQuery Posted by Web前端之家 2021.11.10 views: 3047 评论:0

    react每日一学:学习下react-navigation如何判断用户是否登录跳转到登录页的方法。一起来看个实例。新建一个index.js。import React, {Component} from 'rea...

    Tags: react

  • 如何使用 React Textfit 创建响应式 React 组件

    React Posted by Web前端之家 2021.10.12 views: 2133 评论:0

    在React中进行开发涉及定义可重用组件并将它们组装到应用程序的各个部分以实现所需的用户界面(UI)。在本文中,我们将介绍该react-textfit库,它可以轻松创建响应式React组件,这些组件可在布局中出现的任何位置进行可预测的显示。文本拟合问...

    Tags: reactreact-textfit

  • React 教程:从头开始构建计算器应用程序

    React Posted by Web前端之家 2021.09.28 views: 2554 评论:0

    在本教程中,我们将构建一个ReactCalculator应用程序。您将学习如何制作线框、设计布局、创建组件、更新状态和格式化输出。规划由于我们将构建一个计算器应用程序,让我们选择一个学习范围不太复杂但也不太基本的范围来涵盖创建应用程序的不同方面。我们将实...

    Tags: react

  • react开发收藏:了解下react开启代理的应用

    Js&JQuery Posted by Web前端之家 2021.09.09 views: 2032 评论:0

    react开发收藏:了解下react开启代理的应用。一起来了解下吧,今天介绍两种方式,如下:方法一在package.json文件中添加"proxy":"https://localhost:5000"配置之后300...

    Tags: react

  • react开发小应用:如何分页显示数据

    Js&JQuery Posted by 天空 2021.09.08 views: 3112 评论:0

    分享一个react开发小应用:如何分页显示数据。展示一下主要三个组件:父组件listBox、列表组件List、按钮组件PageButton。父组件listBox:const listData = [{  &...

    Tags: react

  • 学习ReactJS前必须知道的5大技能

    React Posted by Web前端之家 2021.09.03 views: 1932 评论:0

    在跳入React之前,您是否了解足够的javascript?你知道如何使用map()方法在javascript或ReactJS中循环遍历数组吗?如果您正在学习React并且遇到了上述问题,那么您肯定在学习过程中犯了错误。毫无疑问,Reac...

    Tags: react

  • 什么是 Vitejs?新前端构建工具概述

    开发工具 Posted by Web前端之家 2021.08.26 views: 6483 评论:2

    Vite是一款显着提升前端开发体验的构建工具。您可以使用Vite为Vue和React等框架设置开发环境,甚至可以为带有开发服务器和热重载的普通JavaScript应用程序设置三个命令。无需额外配置,您也可以将Vite用于TypeScrip...

    Tags: Vitejsvuereact

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2022 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.7.2