×

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"的文章

  • 使用Electron Forge和React构建安全的桌面应用程序

    React Posted by Web前端之家 2021.04.23 views: 39 评论:0

    在本文中,我们将使用Electron和React创建一个简单的桌面应用程序。这将是一个名为“scratchpad”的小型文本编辑器,类似于FromScratch,它会在您键入时自动保存更改。我们将通过使用ElectronForge(Electron团队提供...

    Tags: react

  • React开发:提交输入框input值的小应用

    React Posted by andy001 2021.04.15 views: 172 评论:2

    随着React应用开发越来越普遍,对于初入行的童鞋来说,必须先打好基础,再深入学习。今天分享下在React开发中的小应用:提交输入框input值。这种应用在平时项目中经常遇到,所以对于Web前端开发人员,必须熟练掌握。利用DOM提供的Event对象的targe...

    Tags: reactinput

  • react开发小TIPS:登录表单的简单应用

    Js&JQuery Posted by 天空 2021.04.13 views: 219 评论:0

    react开发小TIPS:登录表单的简单应用。代码如下:import React from 'react';import { Input, Button, message...

    Tags: react

  • react开发小应用:获取input输入框的值

    Js&JQuery Posted by 天空 2021.04.08 views: 368 评论:0

    分享一个react开发小应用:获取input输入框的值。介绍两种方法:第一种方式非受控组件获取第二种方式受控组件获取非受控组件获取refimport React , {Component} from &#...

    Tags: react

  • React中功能组件和类组件之间的区别

    React Posted by Web前端之家 2021.04.02 views: 280 评论:2

    制作一个计数器应用程序,当用户使用“功能”和“类”组件单击“添加”按钮时,该应用程序将增加计数数量。功能组件:功能组件是在React中工作时会遇到的一些更常见的组件。这些只是JavaScript函数。我们可以通过编写JavaScript函数来创建React的功...

    Tags: react

  • 如何使用Jest测试React组件

    React Posted by Web前端之家 2020.12.28 views: 1063 评论:0

    在本文中,我们将研究如何使用Jest(Facebook维护的测试框架)来测试React组件。我们将首先研究如何在普通JavaScript函数上使用Jest,然后再查看Jest提供的一些特定功能,这些功能专门旨在简化React应用程序的测试。值得注意的是,Jes...

    Tags: reactJest

  • 如何组织大型React应用并使其组件模块化

    React Posted by Web前端之家 2020.11.03 views: 1040 评论:0

    在本文中,我将讨论构建和构造大型React应用程序时采用的方法。React的最佳功能之一是它如何摆脱阻碍,并且在文件结构方面几乎没有描述性。因此,您会在StackOverflow和类似站点上发现很多问题,询问如何构建应用程序。这是一个很自以为是的话题,没有正...

    Tags: jsreact

  • canvas在react里的应用

    Js&JQuery Posted by Web前端之家 2020.09.02 views: 2062 评论:0

    canvas在react里的应用,了解下吧。我们会用到react-konva插件。react-konva和react-canvas是github上星星比较多的react相关canvas第三方库。由于react-canvas从17年3月之后就没有更新了,且不支持...

    Tags: reactreact-konvacanvas

  • 在react后端页面实现点击按钮,跳转到页面

    Js&JQuery Posted by andy001 2020.06.13 views: 3076 评论:0

    在react后端页面实现点击按钮,跳转到页面,如何实现呢?很简单的哟。尝试用fetch请求var url = "https://test.taobao.com/login";let options...

    Tags: react跳转

  • Web前端开发:分享react里的form表单“秘方”

    React Posted by Web前端之家 2020.06.13 views: 1723 评论:0

    炎炎夏日,温度直飙38°,还是在家里舒服点,静下心来写点东西。上篇文章我们分享了“简单了解下react中处理API的get与post以及封装应用“,不知道大伙是否有去学习的。今天我们继续分享react里的技术...

    Tags: reactreact表单

首页|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.7 Valyria