×

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开发每日一学:如何使用Hooks简化受控组件的状态绑定

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

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

    Tags: react

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

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

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

    Tags: react

  • React开发小应用:实现BOX拖拽功能

    React Posted by andy001 2021.06.10 views: 572 评论:1

    分享React开发小应用:实现BOX拖拽功能。因为工作中会用到JIRA所以想实现一下相似的功能,顺便学习一下H5的拖拽。不支持拖拽改变顺序,感觉有点麻烦,而且没必要。感觉相关的博文好少的,大部分都是直接上代码,没有解释。图片默认可以拖动,其他元素的拖动...

    Tags: react

  • React开发TIPS:React Router里使用history跳转

    Js&JQuery Posted by andy001 2021.05.24 views: 491 评论:0

    学一个React开发TIPS:ReactRouter里使用history跳转。在react-router中组件里面的跳转可以用<Link>但是在组件外面改如何跳转,需要用到react路由的historyreplace方法和push方法使用形式一样...

    Tags: react

  • react开发小应用:动态添加样式,点击按钮让文字显示隐藏为demo

    React Posted by andy001 2021.05.18 views: 628 评论:0

    夜深了,安静了很多,分享点知识:react的两种动态改变css样式的方法。动态添加class,以点击按钮让文字显示隐藏为demo。动态添加class,以点击按钮让文字显示隐藏为demoimport React, { Compone...

    Tags: react

  • 分享5个2021年的React体系结构最佳实践

    React Posted by Web前端之家 2021.05.08 views: 883 评论:0

    毫无疑问,React彻底改变了我们构建用户界面的方式。它易于学习,极大地方便了创建可重用组件,从而为您的网站提供一致的外观。但是,由于React只负责应用程序的视图层,因此它不执行任何特定的体系结构(例如MVC或MVVM)。随着您的React项目的发展,这可能...

    Tags: react

  • React开发小应用:React里的不可变值

    Js&JQuery Posted by Web前端之家 2021.05.08 views: 521 评论:0

    分享个React开发小应用:React里的不可变值。什么是不可变值?函数式编程是指程序里面的函数和表达式都能像数学中的函数一样,给定了输入值,输出是确定的。比如let a = 1;let b = ...

    Tags: react

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

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

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

    Tags: react

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

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

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

    Tags: reactinput

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

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

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

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