×

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 Textfit 创建响应式 React 组件

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

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

    Tags: reactreact-textfit

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

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

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

    Tags: react

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

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

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

    Tags: react

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

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

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

    Tags: react

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

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

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

    Tags: react

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

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

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

    Tags: Vitejsvuereact

  • 分享React开发应用:向React应用程序添加语音搜索

    React Posted by Web前端之家 2021.08.17 views: 403 评论:0

    语音命令不仅适用于Google或Alexa等助手。它们还可以添加到您的移动和桌面应用程序中,为您的最终用户提供额外的功能甚至乐趣。向您的应用程序添加语音命令或语音搜索非常容易。在本文中,我们将使用WebSpeechAPI来构建语音控制的图书搜索...

    Tags: reactbook-voice-search

  • 使用vue或者react项目,启动时如何修复这样的报错:Error: Cannot find module 'E:\..........'

    VueJs Posted by Web前端之家 2021.08.03 views: 779 评论:0

    在国内前端开发项目的时候,现在很多项目都是基于vue或者react,所以对于新手来说,基础非常重要,今天我们就来分享一个新手经常会犯的错误【以vue为例】,导致会提示:Error:Cannotfindmodule'E:\@vue\cli-ser...

    Tags: vuejsreact

  • React开发每日一学:如何使用Hooks简化受控组件的状态绑定

    Js&JQuery Posted by andy001 2021.07.07 views: 696 评论:0

    React开发每日一学:如何使用Hooks简化受控组件的状态绑定,开始学习之前,我们必须先了解下相关知识,如下几点:ECMAScript6文章中大量用到了ES6语法,比如解构赋值和函数参数默认值、剩余参数、展开语法、箭头函数等。HooksReact在...

    Tags: react

  • React开发:事件绑定this指向三种方法

    Js&JQuery Posted by Web前端之家 2021.06.16 views: 1468 评论:0

    React开发:事件绑定this指向三种方法。箭头函数1)利用箭头函数自身不绑定this的特点;2)render()方法中的this为组件实例,可以获取到setState();class App extends React.Com...

    Tags: react

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

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

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.6.8 Valyria