React框架知识点整理

前端朱先生

已于 2023-04-11 14:53:59 修改

阅读量183

点赞数

分类专栏： js基础 react 文章标签： react.js javascript 前端

于 2023-04-11 14:24:51 首次发布

本文链接：https://blog.csdn.net/qq_44823114/article/details/130082867

版权

js基础同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

react

1 篇文章 0 订阅

订阅专栏

本文介绍了React开发中的关键概念，包括组件化开发，通过示例展示了如何创建React组件。还讨论了React的虚拟DOM技术，用于提高性能。此外，提到了JSX语法在构建组件时的作用，以及组件的生命周期方法，如挂载、更新和卸载时的处理。文章还涵盖了事件处理、条件渲染、列表渲染和表单管理等重要主题。

摘要由CSDN通过智能技术生成

组件化开发：React组件是React应用的核心，它允许开发者将UI拆分成可重用的部分。下面是一个React组件的代码示例：

import React from 'react';

class MyComponent extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, World!</h1>
      </div>
    );
  }
}

export default MyComponent;

虚拟DOM：React使用虚拟DOM来提高渲染性能。它通过将组件状态的更改记录在虚拟DOM中，然后计算最小化的更改，最后将这些更改应用到浏览器的DOM中。下面是一个简单的虚拟DOM的代码示例：

import React from 'react';
import ReactDOM from 'react-dom';

const element = <h1>Hello, World!</h1>;

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

JSX语法：JSX是一种将HTML和JavaScript结合在一起的语法，它允许开发者在JavaScript中编写类似于HTML的代码。下面是一个使用JSX语法的代码示例：

import React from 'react';

function MyComponent(props) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
    </div>
  );
}

export default MyComponent;

生命周期方法：React组件具有生命周期方法，它们在组件的不同阶段执行。这些方法允许开发者在组件被挂载、更新或卸载时执行一些操作。下面是一个使用生命周期方法的代码示例：

import React from 'react';

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

  componentDidMount() {
    document.title = `You clicked ${this.state.count} times`;
  }

  componentDidUpdate() {
    document.title = `You clicked ${this.state.count} times`;
  }

  componentWillUnmount() {
    document.title = 'React App';
  }

  render() {
    return (
      <div>
        <h1>{this.state.count}</h1>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>Click me</button>
      </div>
    );
  }
}

export default MyComponent;

组件和道具

import React from 'react';

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

export default function App() {
  return (
    <div>
      <Welcome name="Alice" />
      <Welcome name="Bob" />
      <Welcome name="Charlie" />
    </div>
  );
}

状态和生命周期

import React from 'react';

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = { date: new Date() };
  }

  componentDidMount() {
    this.timerID = setInterval(() => this.tick(), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({ date: new Date() });
  }

  render() {
    return <h1>{this.state.date.toLocaleTimeString()}</h1>;
  }
}

export default function App() {
  return (
    <div>
      <Clock />
      <Clock />
      <Clock />
    </div>
  );
}

事件处理

import React from 'react';

export default function App() {
  function handleClick() {
    alert('Button clicked');
  }

  return <button onClick={handleClick}>Click me</button>;
}

条件渲染

import React from 'react';

export default function App() {
  const isLoggedIn = false;

  if (isLoggedIn) {
    return <h1>Welcome back!</h1>;
  } else {
    return <button>Login</button>;
  }
}

列表和键

import React from 'react';

export default function App() {
  const numbers = [1, 2, 3, 4, 5];

  return (
    <ul>
      {numbers.map((number) => (
        <li key={number.toString()}>{number}</li>
      ))}
    </ul>
  );
}

表单

import React from 'react';

export default function App() {
  const [text, setText] = React.useState('');

  function handleChange(event) {
    setText(event.target.value);
  }

  function handleSubmit(event) {
    event.preventDefault();
    alert(`You typed: ${text}`);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={text} onChange={handleChange} />
      <button type="submit">Submit</button>
    </form>
  );
}

组合和继承

import React from 'react';

function FancyBorder(props) {
  return (
    <div style={{ border: '2px solid red', padding: '16px' }}>
      {props.children}
    </div>
  );
}

function WelcomeDialog() {
  return (
    <FancyBorder>
      <h1>Welcome</h1>
      <p>Thank you for visiting our website!</p>
    </FancyBorder>
  );
}

export default WelcomeDialog;