import React from "react";

export default class App extends React.Component {
  constructor() {
    super();
    this.state = { name: "張三" };
  }

  updateName() {
    setInterval(() => this.setState({ name: "張三" }), 1000);
  }

  componentDidMount() {
    this.updateName();
  }

  render() {
    return (
      <div>
        <RegularComponent name={this.state.name} />
        {/* 這里可能有其他組件或JSX元素 */}
      </div>
    );
  }
}

import React from "react";

export default class App extends React.Component {
  constructor() {
    super();
    this.state = {
      person: {
        name: "張三",
        age: 20,
        job: "waiter"
      }
    };
  }

  componentDidMount() {
    setTimeout(() => {
      // 這里使用擴(kuò)展運(yùn)算符合并對(duì)象來(lái)確保我們創(chuàng)建了person對(duì)象的一個(gè)新副本
      this.setState({ person: { ...this.state.person, job: "chef" } });
    }, 2000);
  }

  shouldComponentUpdate(nextProps, nextState) {
    // 只在person對(duì)象的name或age屬性發(fā)生變化時(shí)更新組件
    if (this.state.person.name !== nextState.person.name || this.state.person.age !== nextState.person.age) {
      return true;
    }
    return false;
  }

  render() {
    return (
      // 此處根據(jù)你的需求可以添加任何需要顯示的內(nèi)容
      <div>
        Name: {this.state.person.name},
        Age: {this.state.person.age},
        Job: {this.state.person.job}
      </div>
    );
  }
}

import React, { useState, useEffect } from 'react';

function App() {
  const [name] = useState("張三");
  const [index, setIndex] = useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      setIndex(prev => prev + 1);
    }, 1000);

    // 清除interval，防止內(nèi)存泄漏
    return () => clearInterval(intervalId);
  }, []);

  return (
    <div>
      {index}
      <ShowName name={name} />
    </div>
  );
}

function ShowName({ name }) {
  console.log("rendering ShowName");
  return <div>{name}</div>;
}

export default App;

const ShowName = React.memo(function ({ name }) {
  console.log("rendering ShowName");
  return <div>{name}</div>;
})

import React, { memo, useEffect, useState } from "react";

// 比較函數(shù)，用以優(yōu)化渲染
function comparePerson(prevProps, nextProps) {
  if (
    prevProps.person.name !== nextProps.person.name ||
    prevProps.person.age !== nextProps.person.age
  ) {
    return false; // 如果person的name或age改變了，就重新渲染
  }
  return true; // 如果person的name或age沒(méi)變，不重新渲染
}

// 用memo包裹的組件，將比較函數(shù)作為第二個(gè)參數(shù)傳入
const ShowPerson = memo(function ShowPerson({ person }) {
  console.log("rendering ShowPerson");
  return (
    <div>
      {person.name} {person.age}
    </div>
  );
}, comparePerson);

function App() {
  const [person, setPerson] = useState({ name: "張三", age: 20, job: "waiter" });

  useEffect(() => {
    const intervalId = setInterval(() => {
      // 更新設(shè)置person狀態(tài)對(duì)象中的job屬性，而不是name或age
      setPerson(prevPerson => ({ ...prevPerson, job: "chef" }));
    }, 1000);

    // 清除interval，防止內(nèi)存泄漏
    return () => clearInterval(intervalId);
  }, []);

  return (
    <div>
      <ShowPerson person={person} />
    </div>
  );
}

export default App;

import React, { lazy, Suspense } from 'react';
import { BrowserRouter, Link, Route, Switch } from "react-router-dom";

// 使用React的lazy函數(shù)動(dòng)態(tài)導(dǎo)入組件
const Home = lazy(() => import(/* webpackChunkName: "Home" */ "./Home"));
const List = lazy(() => import(/* webpackChunkName: "List" */ "./List"));

function App() {
  return (
    <BrowserRouter>
      <Link to="/">Home</Link>
      <Link to="/list">List</Link>
      <Switch>
        // 使用Suspense包裹Route，并提供fallback來(lái)展示加載狀態(tài)
        <Suspense fallback={<div>Loading...</div>}>
          <Route path="/" component={Home} exact />
          <Route path="/list" component={List} />
        </Suspense>
      </Switch>
    </BrowserRouter>
  );
}

export default App;

import React, { lazy, Suspense } from "react";

function App() {
  let LazyComponent = null;
  if (true) {
    LazyComponent = lazy(() => import(/* webpackChunkName: "Home" */ "./Home"));
  } else {
    LazyComponent = lazy(() => import(/* webpackChunkName: "List" */ "./List"));
  }

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

export default App;

onChange={e=>this.setState({value:e.target.value})}

this.handleOnChange = e=>this.setState({value:e.target.value});
...
onChange={handleOnChange}

constructor(){
    super();
    this.handleClick = this.handleClick.bind(this);
}

<Button onClick={this.handleClick.bind(this)}>按鈕</Button>

fucntion App () {
  return <div style={{backgroundColor: 'red'}}>div</div>
}

function App() {
  return (
    <>
      {true && <AdminHeader />}
      <Header />
      <Content />
    </>
  );
}

function App() {
  if (true) {
    return (
      <>
        <AdminHeader />
        <Header />
        <Content />
      </>
    );
  } else {
    return (
      <>
        <Header />
        <Content />
      </>
    );
  }
}

import React from 'react';

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // 當(dāng)子組件拋出異常，這里將會(huì)被調(diào)用，返回新的state
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // 你同樣可以在這里記錄錯(cuò)誤信息
    console.error('ErrorBoundary caught an error', error, info);
  }

  render() {
    if (this.state.hasError) {
      // 當(dāng)發(fā)生錯(cuò)誤時(shí)，你可以渲染任何自定義的回退UI
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

<ErrorBoundary>
  <MyComponent />
</ErrorBoundary>

function MyFunctionalComponent() {
  useEffect(() => {
    try {
      // 這里是可能會(huì)拋出錯(cuò)誤的代碼
    } catch (error) {
      // 你可以在這里處理錯(cuò)誤，例如設(shè)置狀態(tài)顯示錯(cuò)誤信息
    }
  });

  return (
    // 你的組件返回值
  );
}

// 應(yīng)用錯(cuò)誤邊界
<ErrorBoundary>
  <MyFunctionalComponent />
</ErrorBoundary>

onClick={() =>
  this.setState({
    ...this.state,
    employee: {
      ...this.state.employee,
      age: 30
    }
  })
}