react常用功能和示例

lubingzy

已于 2023-03-10 14:32:15 修改

阅读量256

点赞数

分类专栏：编程开发文章标签： react.js javascript 前端

于 2023-03-10 13:55:12 首次发布

本文链接：https://blog.csdn.net/lubingzy/article/details/129441340

版权

编程开发专栏收录该内容

4 篇文章 0 订阅

订阅专栏

React 是一个用于构建用户界面的 JavaScript 库，它提供了许多功能，以下是其中一些常用功能和示例：

JSX：JSX 允许您在 JavaScript 中编写类似 HTML 的代码，以便更容易地创建 UI 元素。

javascriptCopy code
import React from 'react';

function App() {
  return (
    <div>
      <h1>Hello, World!</h1>
      <p>This is a paragraph.</p>
    </div>
  );
}

export default App;

组件：组件是 React 应用程序的构建块，您可以使用它们来构建复杂的 UI。

javascriptCopy code
import React from 'react';

function MyComponent(props) {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.text}</p>
    </div>
  );
}

export default MyComponent;

状态：React 中的状态是一个对象，它描述了组件在任何给定时间点的特定情况。

javascriptCopy code
import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const incrementCount = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={incrementCount}>Click me</button>
    </div>
  );
}

export default Counter;

生命周期：React 组件具有生命周期方法，这些方法在组件生命周期的不同阶段被调用。

javascriptCopy code
import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: []
    };
  }

  componentDidMount() {
    // 在组件挂载后调用
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => this.setState({ data }));
  }

  render() {
    return (
      <ul>
        {this.state.data.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    );
  }
}

export default MyComponent;

路由：React 路由器可以帮助您将应用程序分成多个页面，并根据 URL 呈现不同的内容。

javascriptCopy code
import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

function Home() {
  return <h1>Home</h1>;
}

function About() {
  return <h1>About</h1>;
}

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
        </ul>
      </nav>

      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
    </Router>
  );
}

export default App;

Props：Props 是 React 组件之间传递数据的一种方式。通过将属性传递给组件，可以使组件根据数据的不同呈现不同的内容。

javascriptCopy code
import React from 'react';

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

function App() {
  return <Greeting name="Alice" />;
}

export default App;

条件渲染：在 React 中，您可以使用条件语句根据不同的条件渲染不同的内容。

javascriptCopy code
import React from 'react';

function App(props) {
  const isLoggedIn = props.isLoggedIn;
  return (
    <div>
      {isLoggedIn ? <p>Welcome back!</p> : <p>Please log in.</p>}
    </div>
  );
}

export default App;

表单处理：React 中的表单处理通常涉及将表单中的值存储在组件的状态中，并在表单提交时处理它们。

javascriptCopy code
import React, { useState } from 'react';

function LoginForm() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = event => {
    event.preventDefault();
    // 处理表单提交逻辑
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Username:
        <input
          type="text"
          value={username}
          onChange={e => setUsername(e.target.value)}
        />
      </label>
      <label>
        Password:
        <input
          type="password"
          value={password}
          onChange={e => setPassword(e.target.value)}
        />
      </label>
      <button type="submit">Log in</button>
    </form>
  );
}

export default LoginForm;

组合和继承：在 React 中，您可以通过组合和继承来构建复杂的 UI。通过将多个组件组合在一起，您可以构建复杂的页面，并使其易于管理和维护。

javascriptCopy code
import React from 'react';

function Dialog(props) {
  return (
    <div>
      <h1>{props.title}</h1>
      <div>{props.children}</div>
    </div>
  );
}

function WelcomeDialog() {
  return (
    <Dialog title="Welcome">
      <p>Thank you for using our service!</p>
    </Dialog>
  );
}

export default WelcomeDialog;

Hooks：React Hooks 是 React 16.8 中引入的一项新功能，它们使您可以在函数组件中使用状态和其他 React 功能，而不必使用类组件。

javascriptCopy code
import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const incrementCount = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={incrementCount}>Click me</button>
    </div>
  );
}

export default Counter;

生命周期方法：React 组件具有生命周期方法，可以在组件的不同阶段执行操作，例如在组件挂载时、更新时或卸载时执行操作。下面是 React 组件的生命周期方法示例：

javascriptCopy code
import React from 'react';

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

  componentDidMount() {
    console.log('Component mounted');
  }

  componentDidUpdate() {
    console.log('Component updated');
  }

  componentWillUnmount() {
    console.log('Component unmounted');
  }

  render() {
    return <div>{this.state.count}</div>;
  }
}

export default MyComponent;

React Router：React Router 是一个流行的第三方库，用于管理单页应用程序中的路由。它允许您使用声明性的方式定义路由，并根据 URL 的变化自动更新页面内容。下面是 React Router 的一个基本示例：

javascriptCopy code
import React from 'react';
import { BrowserRouter, Route, Link } from 'react-router-dom';

function Home() {
  return <h1>Home</h1>;
}

function About() {
  return <h1>About</h1>;
}

function App() {
  return (
    <BrowserRouter>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
        </ul>

        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </div>
    </BrowserRouter>
  );
}

export default App;

React Context：React Context 是一种用于在组件之间共享数据的方式。它允许您避免通过多层组件传递 props 的麻烦，而是将数据直接传递给整个组件树。下面是一个使用 React Context 的示例：

javascriptCopy code
import React, { createContext, useContext } from 'react';

const MyContext = createContext('default');

function Child() {
  const value = useContext(MyContext);
  return <div>{value}</div>;
}

function Parent() {
  return <Child />;
}

function App() {
  return (
    <MyContext.Provider value="hello">
      <Parent />
    </MyContext.Provider>
  );
}

export default App;

动画：React 本身不提供动画的功能，但可以与第三方动画库集成。例如，React Transition Group 是一个流行的库，可以轻松地在 React 应用程序中创建动画。下面是 React Transition Group 的一个示例：

javascriptCopy code
import React, { useState } from 'react';
import { CSSTransition } from 'react-transition-group';
import './styles.css';

function App() {
  const [visible, setVisible] = useState(false);

  return (
    <div>
      <button onClick={() => setVisible(!visible)}>Toggle</button>

      <CSSTransition
        in={visible}
        timeout={500}
        classNames="fade"
        unmountOnExit
      >
        <div>Hello</div>
      </CSSTransition>
    </div>
  );
}

export default App;

Redux：Redux 是一个用于管理应用程序状态的流行第三方库。它使用单一不可变状态树来管理应用程序状态，并提供了一种可预测的方式来处理状态变化。以下是 Redux 的一个基本示例：

phpCopy code
import { createStore } from 'redux';

// 定义 reducer
function counter(state = 0, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
}

// 创建 store
const store = createStore(counter);

// 订阅 state 变化
store.subscribe(() => console.log(store.getState()));

// 分发 action
store.dispatch({ type: 'INCREMENT' });
store.dispatch({ type: 'INCREMENT' });
store.dispatch({ type: 'DECREMENT' });

React Hooks：React Hooks 是 React 16.8 引入的一个新特性，它允许您在不编写 class 组件的情况下使用 state 和其他 React 功能。下面是使用 useState 钩子的一个示例：

javascriptCopy code
import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={() => setCount(count - 1)}>Decrement</button>
    </div>
  );
}

export default Counter;

React Native：React Native 是一个用于构建原生移动应用程序的框架，它使用 React 的组件模型来构建应用程序界面。以下是使用 React Native 的一个示例：

javascriptCopy code
import React, { useState } from 'react';
import { Text, View, TextInput } from 'react-native';

function App() {
  const [text, setText] = useState('');

  return (
    <View>
      <Text>Enter some text:</Text>
      <TextInput value={text} onChangeText={setText} />
      <Text>You entered: {text}</Text>
    </View>
  );
}

export default App;

React Testing Library：React Testing Library 是一个用于测试 React 组件的库。它强调测试应该更接近用户使用组件的方式，而不是关注组件的内部实现细节。以下是使用 React Testing Library 编写的一个基本测试示例：

javascriptCopy code
import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import Counter from './Counter';

test('counter increments and decrements when buttons are clicked', () => {
  const { getByText } = render(<Counter />);
  const incrementButton = getByText('Increment');
  const decrementButton = getByText('Decrement');
  const count = getByText('Count: 0');

  fireEvent.click(incrementButton);
  expect(count).toHaveTextContent('Count: 1');

  fireEvent.click(decrementButton);
  expect(count).toHaveTextContent('Count: 0');
});

Material UI：Material UI 是一个 React 组件库，它提供了许多预先构建好的 UI 组件和样式，可以用于快速构建美观的应用程序界面。以下是使用 Material UI 的一个示例：

javascriptCopy code
import React from 'react';
import Button from '@material-ui/core/Button';

function App() {
  return (
    <div>
      <Button variant="contained" color="primary">
        Click me
      </Button>
    </div>
  );
}

export default App;

Axios：Axios 是一个用于发起 HTTP 请求的库，它支持浏览器和 Node.js。以下是使用 Axios 发起 GET 请求的一个示例：

javascriptCopy code
import React, { useState, useEffect } from 'react';
import axios from 'axios';

function App() {
  const [data, setData] = useState(null);

  useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/todos/1')
      .then(response => setData(response.data));
  }, []);

  return (
    <div>
      {data ? <p>{data.title}</p> : <p>Loading...</p>}
    </div>
  );
}

export default App;

React Native：React Native 是一个用于构建原生移动应用程序的库，它允许您使用 React 组件和语法来构建 iOS 和 Android 应用程序。以下是一个使用 React Native 的示例：

javascriptCopy code
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

function App() {
  return (
    <View style={styles.container}>
      <Text>Hello, world!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff'
  }
});

export default App;

Next.js：Next.js 是一个 React 框架，它提供了许多功能，例如服务器端渲染、静态网站生成、动态导入等，使得构建高性能的 React 应用程序变得更加容易。以下是使用 Next.js 的一个示例：

javascriptCopy code
import Link from 'next/link';

function HomePage() {
  return (
    <div>
      <h1>Welcome to my website</h1>
      <Link href="/about">
        <a>About</a>
      </Link>
    </div>
  );
}

export default HomePage;

Formik：Formik 是一个用于处理表单的库，它简化了表单的处理和验证，并提供了一些方便的功能，例如动态表单字段和表单提交处理等。以下是一个使用 Formik 的示例：

javascriptCopy code
import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';

function App() {
  return (
    <Formik
      initialValues={{ name: '', email: '' }}
      validate={values => {
        const errors = {};

        if (!values.name) {
          errors.name = 'Required';
        }

        if (!values.email) {
          errors.email = 'Required';
        } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,}$/i.test(values.email)) {
          errors.email = 'Invalid email address';
        }

        return errors;
      }}
      onSubmit={(values, { setSubmitting }) => {
        setTimeout(() => {
          alert(JSON.stringify(values, null, 2));
          setSubmitting(false);
        }, 400);
      }}
    >
      {({ isSubmitting }) => (
        <Form>
          <Field type="text" name="name" />
          <ErrorMessage name="name" />

          <Field type="email" name="email" />
          <ErrorMessage name="email" />

          <button type="submit" disabled={isSubmitting}>Submit</button>
        </Form>
      )}
    </Formik>
  );
}

export default App;