react介绍 | 青训营笔记

ygxb
129 阅读7分钟

React发展简史

每一个看似强大的事物背后，都有很长的演进过程，没有什么是凭空出来的

React 是 Facebook 于 2013 年发布的一款用于构建用户界面的 JavaScript 库。在过去的几年里，它已经成为了构建 Web 应用程序的最流行工具之一。下面介绍下 React 发展的一些重要事件：

  • 2010 年，Facebook 开发出了 XHP，它是一种将 XML 语法嵌入到 PHP 中的技术。这启发了 React 的开发者尝试使用类似的思路，将声明式的 XML 语法嵌入到 JavaScript 中。

  • 2011 年，Facebook 开源了 Backbone.js，这是一个基于 MVC（Model-View-Controller）模式的 JavaScript 框架。这是 React 的另一个灵感来源。

  • 2011 年，Facebook 发布了一个名为 HipHop for PHP 的项目，它可以将 PHP 代码编译成 C++ 代码。这启发了 React 的开发者尝试使用类似的思路，使用静态编译优化 React 应用程序的性能。

  • 2012 年，Facebook 发布了一个名为 Presto 的项目，它是一个高性能、分布式 SQL 查询引擎。这启发了 React 的开发者尝试使用类似的思路，将 React 应用程序的 UI 渲染逻辑分解成小块，以提高性能。

  • 2013 年，Facebook 开始开发 React，最初是为了满足其广告平台的需求。React 的目标是提高应用程序的性能和开发效率。

  • 2015 年，React Native 发布，这是一个用于构建原生移动应用程序的框架，它使用 React 的编程模型和语法，可以使开发人员使用相同的代码库构建 iOS 和 Android 应用程序。

  • 2016 年，React 与 React Native 的版本管理合并，这使得开发人员可以更轻松地使用相同的代码库构建 Web 应用程序和移动应用程序。

  • 2018 年，React Hooks 发布，这是一种新的 React API，它使开发人员可以在无需编写类组件的情况下使用状态和其他 React 功能。

  • 2020 年，React 17 发布，这是一个不包含新功能的版本，主要是为了改进 React 的稳定性和向后兼容性。这也是 React 首次实现了无头渲染，这意味着可以在没有浏览器环境的情况下运行 React 应用程序。

  • 2022年，v18concurrent特性上线。

二、React大致介绍

  1. 组件

React是一种组件化的框架，将UI划分为独立的、可复用的组件，每个组件都可以接收输入数据（称为props）并渲染UI。组件可以是类组件（使用类定义）或函数组件（使用函数定义），可以根据不同的场景和需要进行选择。

代码示例：

  1. 定义一个简单的类组件

    import React, { Component } from 'react';

class MyComponent extends Component {
  render() {
return <div>Hello, {this.props.name}!</div>;
  }
}

export default MyComponent;

  2. JSX

JSX是一种JavaScript语法扩展，它允许我们在JavaScript中编写类似HTML的代码。在JSX中，我们可以使用HTML标记，但是标记被编译成React组件。这使得我们可以更方便地构建UI，同时还能利用JavaScript的优势。 import React from 'react';

function MyComponent(props) { return

Hello, {props.name}!
; }

const element = ;

  1. 渲染

React使用ReactDOM.render()方法将组件渲染到DOM上。这个方法接收两个参数：要渲染的组件和要将组件渲染到的DOM元素。ReactDOM.render()只会渲染一次，如果组件需要更新，React会自动更新DOM。 import React from 'react'; import ReactDOM from 'react-dom'; import MyComponent from './MyComponent';

ReactDOM.render(, document.getElementById('root'));

  1. Props

组件可以通过props接收输入数据。props是组件的只读属性，一旦设置，就不能更改。父组件可以向子组件传递props，子组件可以在props上读取传递过来的数据，从而进行渲染。 import React from 'react';

function MyComponent(props) { return

Hello, {props.name}!
; }

const element = ;

  1. State

组件可以使用state来存储和管理内部数据。与props不同，state是可变的。当组件的状态更改时，React会重新渲染组件。通过setState()方法可以修改组件的状态，从而重新渲染组件。需要注意的是，state只能在组件内部使用，而不能被其他组件或外部代码访问。

import React, { Component } from 'react';


class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times.</p>
        <button onClick={this.handleClick}>Click me</button>
      </div>
    );
  }
}

export default MyComponent;
  1. 事件处理

React使用类似于普通HTML元素的事件处理方式来处理用户事件。例如，我们可以使用onClick属性来处理单击事件。事件处理函数需要绑定到组件上，可以通过箭头函数的方式进行绑定。

import React, { Component } from 'react';

class MyComponent extends Component {
  handleClick = () => {
    console.log('Button clicked');
  }

  render() {
    return <button onClick={this.handleClick}>Click me</button>;
  }
}

export default MyComponent;
  1. 条件渲染

React可以使用条件语句（如if和switch）或三元运算符来根据条件渲染不同的组件或元素。这使得我们可以根据不同的场景和条件动态地渲染UI。

import React from 'react';

function MyComponent(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <p>Welcome back!</p>;
  } else {
    return <p>Please log in.</p>;
  }
}

export default MyComponent;
  1. 列表渲染

React可以使用map()方法将数据列表映射到组件列表。这允许我们动态地渲染列表。需要注意的是，需要给每个列表项设置一个唯一的key属性，以便React能够正确地渲染和更新组件。

import React from 'react';

function MyComponent(props) {
  const items = props.items;
  const listItems = items.map((item) =>
    <li key={item.toString()}>
      {item}
    </li>
  );
  return <ul>{listItems}</ul>;
}

export default MyComponent;
  1. 生命周期

组件具有生命周期方法，它们在组件的不同阶段被调用。例如，componentDidMount()方法在组件第一次渲染后被调用。这些生命周期方法可以帮助我们管理组件的状态和副作用，使得我们能够编写更复杂的应用程序。

import React, { Component } from 'react';

class MyComponent extends Component {
  componentDidMount() {
    console.log('Component did mount');
  }

  componentWillUnmount() {
    console.log('Component will unmount');
  }

  render() {
    return <p>Hello, World!</p>;
  }
}

export default MyComponent;
  1. React Hooks

React Hooks是React 16.8版本中引入的新特性，它们允许我们在函数组件中使用状态和其他React功能，而无需编写类组件。使用Hooks可以简化代码，提高可读性，并使得组件更易于测试和重用。常用的Hooks包括useState、useEffect、useContext、useReducer等。

  1. Context

Context是React中一种跨组件传递数据的机制。它允许我们在组件树中向下传递数据，而不需要手动传递props。Context由两个部分组成：Provider和Consumer。Provider组件将数据传递给Consumer组件，Consumer组件可以读取Provider提供的数据。

  1. Refs

Refs是React中一种访问DOM元素和组件实例的机制。通过在组件中创建ref，我们可以访问组件实例，并调用组件的方法。在DOM元素上创建ref可以访问DOM元素，并在需要时操作它。使用Refs可以帮助我们处理一些复杂的场景，例如与第三方库集成。

  1. 组件通信

在React中，组件通信是非常重要的一部分。父子组件可以使用props进行通信，子组件可以向父组件传递数据和事件。但是，在组件树中的不同层级之间进行通信可能会变得复杂。在这种情况下，可以使用Context、Redux等状态管理工具来进行通信。

  1. 单向数据流

React中的数据流是单向的，即数据从父组件向子组件流动。这种单向数据流使得组件的数据流动变得可预测，使得组件的状态更易于管理和调试。同时，单向数据流也可以提高应用程序的性能，因为React可以更好地优化组件的更新。

三、总结

React 因其高效、灵活和可维护性而成为最受欢迎的 JavaScript 库之一。它提供了强大的组件化开发模型，使开发人员能够将 UI 拆分成可重用的部分，并且可以轻松地对其进行测试和维护。现在大多数企业的前端岗位都需要会这项技术的人才。

avatar
文章
阅读
粉丝