×

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

  • canvas在react里的应用

    Js&JQuery Posted by Web前端之家 2020.09.02 views: 236 评论: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: 582 评论: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: 507 评论:0

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

    Tags: reactreact表单

  • 简单了解下react中处理API的get与post以及封装应用

    React Posted by Web前端之家 2020.06.12 views: 635 评论:0

    在Web前端开发项目中,处理数据交互,不管在原生javascript、jQuery还是在流行框架vuejs和react里,普遍用的是get和post方法;前二者的处理,相信大家很熟悉了,不在此次分享主题中,至于vuejs之前也分...

    Tags: jsreactvuejspostget

  • 了解下React中标准路由库:React Router v5

    React Posted by Web前端之家 2020.06.01 views: 639 评论:0

    ReactRouter是React的事实上的标准路由库。当您需要在具有多个视图的React应用程序中导航时,将需要一个路由器来管理URL。ReactRouter会做到这一点,使您的应用程序UI和URL保持同步。本教程向您介绍ReactRouterv5以...

    Tags: reactReact Router

  • 介绍三种使用react控制元素显示和隐藏的方法

    Js&JQuery Posted by andy001 2020.05.29 views: 873 评论:0

    介绍三种使用react控制元素显示和隐藏的方法,一起来了解下吧。1.通过state变量来控制是否渲染元素类似于vue的v-if方法是通过变量来控制是否加载元素的,如果变量为false,内容就直接不会渲染的。class Demo e...

    Tags: react

  • 简述react-router-dom的用法

    Js&JQuery Posted by andy001 2020.05.25 views: 539 评论:0

    在react项目开发过程中经常会遇到,页面跳转之类的路由相关事件,为了更好的处理这些需要运用到react路由相关的一些包。包括:react-router、react-router-dom、react-router-nativereact-router,只实现...

    Tags: reactreact-router-dom

  • 搭建react项目需要注意的10条法则

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

    搭建react项目需要注意的10条法则:1,className一定是大写字母开头,例如:App-logo,App,App-header。2,有关react元素的更新,唯一办法是创建新元素,然后重新将其传入ReactDOM.render()中重绘。3,通过rea...

    Tags: react

  • 为何近几年Web前端“兑变”如此之快?

    互联网 Posted by Web前端之家 2019.07.12 views: 3841 评论:0

    近几年,前端的发展是大家有目共睹的;设计方面从phtoshop到现在的sketch,前端开发从javascript到jQuery,再到现在的vue,react,webpack等,可以说,这2两年,变化太大。尽管开发人员和技术人员在前端领域中的数量逐年上升,生态...

    Tags: 前端jsvuereactsketch

  • 来了解下当前JavaScript三大热门框架

    Js&JQuery Posted by yinqiong 2018.01.29 views: 4896 评论:0

    在目前流行和使用方面主导的三个框架是React,Angular和Vue。他们每个都有大量的社区和大量的培训资源。如果你是一个新的开发者学习一个框架来帮助你找到工作,这三个是你最好的选择。下面看看过去六个月的npm下载情况:  &n...

    Tags: reactangularvue.js

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

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

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.6.5 Valyria