行业资讯

JavaScript中React面向组件编程实例代码分析

发布时间：2023-03-30 15:56:50 作者：iii
来源：亿速云 阅读：460

JavaScript中React面向组件编程实例代码分析

目录

  1. 引言
  2. React组件基础
  3. 组件间通信
  4. 状态管理
  5. 高阶组件
  6. Hooks
  7. React Router
  8. Redux
  9. 性能优化
  10. 总结

引言

React是一个用于构建用户界面的JavaScript库，它采用组件化的思想，将UI拆分为独立的、可复用的组件。通过面向组件编程，开发者可以更高效地构建复杂的用户界面。本文将深入探讨React中的组件编程，并通过实例代码分析来帮助读者更好地理解和掌握React的核心概念。

React组件基础

2.1 函数组件

函数组件是React中最简单的组件形式，它是一个纯函数，接收props作为参数，并返回一个React元素。

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

2.2 类组件

类组件是React中另一种常见的组件形式，它继承自React.Component，并且可以包含状态和生命周期方法。

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

2.3 组件的生命周期

类组件具有生命周期方法，可以在组件的不同阶段执行特定的操作。常见的生命周期方法包括componentDidMount、componentDidUpdate和componentWillUnmount。

class Welcome extends React.Component {
  componentDidMount() {
    console.log('Component mounted');
  }

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

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

  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

组件间通信

3.1 父子组件通信

父子组件之间的通信通常通过props实现。父组件通过props向子组件传递数据，子组件通过回调函数向父组件传递数据。

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

  return (
    <div>
      <Child count={count} onIncrement={() => setCount(count + 1)} />
    </div>
  );
}

function Child({ count, onIncrement }) {
  return (
    <div>
      <p>{count}</p>
      <button onClick={onIncrement}>Increment</button>
    </div>
  );
}

3.2 兄弟组件通信

兄弟组件之间的通信可以通过共同的父组件来实现。父组件作为中介，负责在兄弟组件之间传递数据。

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

  return (
    <div>
      <ChildA count={count} />
      <ChildB onIncrement={() => setCount(count + 1)} />
    </div>
  );
}

function ChildA({ count }) {
  return <p>{count}</p>;
}

function ChildB({ onIncrement }) {
  return <button onClick={onIncrement}>Increment</button>;
}

3.3 跨层级组件通信

跨层级组件之间的通信可以通过Context API实现。Context API允许在组件树中传递数据，而不必通过每一层级的props。

const CountContext = React.createContext();

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

  return (
    <CountContext.Provider value={{ count, setCount }}>
      <ChildA />
      <ChildB />
    </CountContext.Provider>
  );
}

function ChildA() {
  const { count } = useContext(CountContext);
  return <p>{count}</p>;
}

function ChildB() {
  const { setCount } = useContext(CountContext);
  return <button onClick={() => setCount(prev => prev + 1)}>Increment</button>;
}

状态管理

4.1 useState

useState是React中最常用的Hook之一，用于在函数组件中管理状态。

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

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

4.2 useReducer

useReducer是另一种管理状态的Hook，适用于复杂的状态逻辑。

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <div>
      <p>{state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
}

4.3 Context API

Context API可以用于在组件树中共享状态，避免props层层传递。

const CountContext = React.createContext();

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

  return (
    <CountContext.Provider value={{ count, setCount }}>
      <ChildA />
      <ChildB />
    </CountContext.Provider>
  );
}

function ChildA() {
  const { count } = useContext(CountContext);
  return <p>{count}</p>;
}

function ChildB() {
  const { setCount } = useContext(CountContext);
  return <button onClick={() => setCount(prev => prev + 1)}>Increment</button>;
}

高阶组件

5.1 高阶组件的基本概念

高阶组件（HOC）是一个函数，它接收一个组件并返回一个新的组件。HOC通常用于复用组件逻辑。

function withLoading(WrappedComponent) {
  return function WithLoadingComponent({ isLoading, ...props }) {
    if (isLoading) {
      return <p>Loading...</p>;
    }
    return <WrappedComponent {...props} />;
  };
}

const MyComponent = ({ data }) => <div>{data}</div>;
const MyComponentWithLoading = withLoading(MyComponent);

5.2 高阶组件的应用场景

HOC可以用于多种场景，如权限控制、日志记录、数据获取等。

function withAuth(WrappedComponent) {
  return function WithAuthComponent({ isAuthenticated, ...props }) {
    if (!isAuthenticated) {
      return <p>Please login to view this page.</p>;
    }
    return <WrappedComponent {...props} />;
  };
}

const MyComponent = ({ data }) => <div>{data}</div>;
const MyComponentWithAuth = withAuth(MyComponent);

Hooks

6.1 useState

useState用于在函数组件中管理状态。

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

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

6.2 useEffect

useEffect用于在函数组件中执行副作用操作，如数据获取、订阅、手动DOM操作等。

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

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]);

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

6.3 useContext

useContext用于在函数组件中访问Context。

const CountContext = React.createContext();

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

  return (
    <CountContext.Provider value={{ count, setCount }}>
      <Child />
    </CountContext.Provider>
  );
}

function Child() {
  const { count, setCount } = useContext(CountContext);
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(prev => prev + 1)}>Increment</button>
    </div>
  );
}

6.4 useReducer

useReducer用于在函数组件中管理复杂的状态逻辑。

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <div>
      <p>{state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
}

6.5 useMemo

useMemo用于在函数组件中缓存计算结果，避免不必要的重复计算。

function ExpensiveComponent({ a, b }) {
  const result = useMemo(() => {
    return a + b;
  }, [a, b]);

  return <p>{result}</p>;
}

6.6 useCallback

useCallback用于在函数组件中缓存回调函数，避免不必要的重新创建。

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

  const increment = useCallback(() => {
    setCount(prev => prev + 1);
  }, []);

  return (
    <div>
      <p>{count}</p>
      <Child onIncrement={increment} />
    </div>
  );
}

function Child({ onIncrement }) {
  return <button onClick={onIncrement}>Increment</button>;
}

React Router

7.1 基本路由配置

React Router用于在React应用中实现路由功能。

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Switch>
    </Router>
  );
}

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

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

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

7.2 嵌套路由

React Router支持嵌套路由，可以在父路由中定义子路由。

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/dashboard" component={Dashboard} />
      </Switch>
    </Router>
  );
}

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Switch>
        <Route path="/dashboard/profile" component={Profile} />
        <Route path="/dashboard/settings" component={Settings} />
      </Switch>
    </div>
  );
}

function Profile() {
  return <h2>Profile</h2>;
}

function Settings() {
  return <h2>Settings</h2>;
}

7.3 路由守卫

React Router可以通过自定义组件实现路由守卫，控制用户访问权限。

function PrivateRoute({ component: Component, isAuthenticated, ...rest }) {
  return (
    <Route
      {...rest}
      render={props =>
        isAuthenticated ? (
          <Component {...props} />
        ) : (
          <Redirect to="/login" />
        )
      }
    />
  );
}

function App() {
  const isAuthenticated = true; // 假设用户已登录

  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <PrivateRoute path="/dashboard" component={Dashboard} isAuthenticated={isAuthenticated} />
        <Route path="/login" component={Login} />
      </Switch>
    </Router>
  );
}

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

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

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

Redux

8.1 Redux基本概念

Redux是一个用于管理应用状态的JavaScript库，它采用单一数据源和不可变状态的原则。

import { createStore } from 'redux';

function counterReducer(state = { count: 0 }, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

const store = createStore(counterReducer);

store.dispatch({ type: 'increment' });
console.log(store.getState()); // { count: 1 }

8.2 Redux与React的结合

React与Redux的结合通常通过react-redux库实现，Provider组件用于将Redux store传递给React组件树。

import { Provider, connect } from 'react-redux';

function Counter({ count, dispatch }) {
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
    </div>
  );
}

const mapStateToProps = state => ({
  count: state.count
});

const ConnectedCounter = connect(mapStateToProps)(Counter);

function App() {
  return (
    <Provider store={store}>
      <ConnectedCounter />
    </Provider>
  );
}

8.3 Redux中间件

Redux中间件用于在action被dispatch到reducer之前或之后执行额外的逻辑，如日志记录、异步操作等。

import { applyMiddleware, createStore } from 'redux';
import thunk from 'redux-thunk';

function counterReducer(state = { count: 0 }, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

const store = createStore(counterReducer, applyMiddleware(thunk));

function incrementAsync() {
  return dispatch => {
    setTimeout(() => {
      dispatch({ type: 'increment' });
    }, 1000);
  };
}

store.dispatch(incrementAsync());

性能优化

9.1 组件懒加载

React支持通过React.lazy和Suspense实现组件的懒加载，减少初始加载时间。

import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

9.2 使用React.memo

React.memo用于缓存函数组件，避免不必要的重新渲染。

const MyComponent = React.memo(function MyComponent({ data }) {
  return <div>{data}</div>;
});

9.3 使用useMemo和useCallback

useMemo和useCallback用于缓存计算结果和回调函数，避免不必要的重复计算和重新创建。

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

  const increment = useCallback(() => {
    setCount(prev => prev + 1);
  }, []);

  const result = useMemo(() => {
    return count * 2;
  }, [count]);

  return (
    <div>
      <p>{result}</p>
      <Child onIncrement={increment} />
    </div>
  );
}

function Child({ onIncrement }) {
  return <button onClick={onIncrement}>Increment</button>;
}

总结

React的面向组件编程思想使得开发者能够更高效地构建复杂的用户界面。通过本文的实例代码分析，我们深入探讨了React组件的各种概念和技术，包括组件基础、组件间通信、状态管理、高阶组件、Hooks、

推荐阅读：
  1. JavaScript中的原型和原型链怎么理解
  2. javascript如何替换节点

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。

javascript react

上一篇：vue遮罩和ref的使用方法是什么

下一篇：Java格式化输出的方法有哪些

相关阅读

您好，登录后才能下订单哦！

密码登录
登录注册
获取短信验证码
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》
产品服务
地区划分
帮助支持
关于我们
行业资讯-文章归档 问答-问答归档
广州亿速云计算有限公司

7*24小时在线电话：400-100-2938

7*24小时在线QQ：800811969

Copyright © Yisu Cloud Ltd. All Rights Reserved. 2018 版权所有
粤ICP备17096448号-1 粤公网安备 44010402001142号