Core react interview questions Base

export default function App() {
  return <h1 className="greeting">{"Hello, this is a JSX Code!"}</h1>;
}

import { createElement } from "react";

export default function App() {
  return createElement(
    "h1",
    { className: "greeting" },
    "Hello, this is a JSX Code!"
  );
}

const element = React.createElement("div", { id: "login-btn" }, "Login");

<div id="login-btn">Login</div>

{
  type: 'div',
  props: {
    children: 'Login',
    id: 'login-btn'
  }
}

const Button = ({ handleLogin }) => (
  <div id={"login-btn"} onClick={handleLogin}>
    Login
  </div>
);

const Button = ({ handleLogin }) =>
  React.createElement(
    "div",
    { id: "login-btn", onClick: handleLogin },
    "Login"
  );

function Greeting({ message }) {
  return <h1>{`Hello, ${message}`}</h1>;
}

class Greeting extends React.Component {
  render() {
    return <h1>{`Hello, ${this.props.message}`}</h1>;
  }
}

"use client";

import { ErrorBoundary } from "react-error-boundary";

<ErrorBoundary fallback={<div>Something went wrong</div>}>
  <ExampleApplication />
</ErrorBoundary>;

const MemoizedComponent = memo(SomeComponent, arePropsEqual?);

import { memo, useState } from "react";

const EmployeeProfile = memo(function EmployeeProfile({ name, email }) {
  return (
    <>
      <p>Name:{name}</p>
      <p>Email: {email}</p>
    </>
  );
});
export default function EmployeeRegForm() {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  return (
    <>
      <label>
        Name: <input value={name} onChange={(e) => setName(e.target.value)} />
      </label>
      <label>
        Email:{" "}
        <input value={email} onChange={(e) => setEmail(e.target.value)} />
      </label>
      <hr />
      <EmployeeProfile name={name} />
    </>
  );
}

import { useState } from "react";

function User() {
  const [message, setMessage] = useState("Welcome to React world");

  return (
    <div>
      <h1>{message}</h1>
    </div>
  );
}

const ChildComponent = ({ name, age, gender = "male" }) => {
  return (
    <div>
      <p>{name}</p>
      <p>{age}</p>
      <p>{gender}</p>
    </div>
  );
};

function BookStore() {
  function handleTitleChange(e) {
    console.log("The new title is:", e.target.value);
    // 'e' represents synthetic event
    const nativeEvent = e.nativeEvent;
    console.log(nativeEvent);
    e.stopPropagation();
    e.preventDefault();
  }

  return <input name="title" onChange={handleTitleChange} />;
}

<h1>Hello!</h1>;
{
  messages.length > 0 && !isLogin ? (
    <h2>You have {messages.length} unread messages.</h2>
  ) : (
    <h2>You don't have unread messages.</h2>
  );
}

const todoItems = todos.map((todo) => <li key={todo.id}>{todo.text}</li>);

const todoItems = todos.map((todo, index) => <li key={index}>{todo.text}</li>);

{
  type: 'div', // 或者是函数组件/类组件
  props: {
    className: 'container',
    children: [...], // 子节点数组
  },
  key: null,
  ref: null
}

const element = <div className="container">Hello</div>;

const element = React.createElement("div", { className: "container" }, "Hello");

const fiber = {
  type: 'div',
  props: { className: 'container', children: [...] },
  stateNode: null, // 指向真实DOM节点
  return: parentFiber,
  child: childFiber,
  sibling: null,
  alternate: null, // 指向旧的fiber，用于diff
  effectTag: 'UPDATE', // 标记需要执行的DOM操作
  // ... 其他属性
};

{
  type: 'div',
  props: {
    className: 'container',
    onClick: () => {}
  },
  children: [
    {
      type: 'p',
      props: { className: 'text' },
      children: ['Hello, World!']
    }
  ]
}

{
  type: 'div',
  key: null,
  stateNode: null,
  child: null,
  sibling: null,
  return: null,
  pendingProps: {},
  memoizedProps: {},
  memoizedState: null,
  updateQueue: null,
  effectTag: 0,
  nextEffect: null,
  firstEffect: null,
  lastEffect: null,
  expirationTime: 0,
  alternate: null,
}

function MyDiv({ children }){
    return (
      <div>
        {children}
      </div>;
    );
}

export default function Greeting() {
  return (
    <MyDiv>
      <span>{"Hello"}</span>
      <span>{"World"}</span>
    </MyDiv>
  );
}

const MyComponent = React.memo(function MyComponent(props) {
  // 组件逻辑
});

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
const memoizedCallback = useCallback(() => doSomething(a, b), [a, b]);

const [state, dispatch] = useReducer(reducer, initialState);

const prevProps = useRef();

const OtherComponent = React.lazy(() => import("./OtherComponent"));

<Profiler id="MyComponent" onRender={callback}>
  <MyComponent />
</Profiler>

import React, { useState, useTransition } from "react";

const searchAPI = (query) => {
  // 模拟 API 调用
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(
        Array(20)
          .fill(query)
          .map((item, index) => `${item} ${index + 1}`)
      );
    }, 1000);
  });
};

function SearchApp() {
  const [query, setQuery] = useState("");
  const [results, setResults] = useState([]);
  const [isPending, startTransition] = useTransition();

  const handleSearch = async (e) => {
    const newQuery = e.target.value;
    setQuery(newQuery);

    startTransition(async () => {
      const searchResults = await searchAPI(newQuery);
      setResults(searchResults);
    });
  };

  return (
    <div>
      <input
        type="text"
        value={query}
        onChange={handleSearch}
        placeholder="Search..."
      />
      {isPending && <p>Updating results...</p>}
      <ul>
        {results.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default SearchApp;

import React, { useState, useDeferredValue, useMemo } from "react";

// 假设这是一个计算密集型的组件
function ExpensiveChart({ data }) {
  const items = useMemo(() => {
    // 模拟耗时计算
    console.log("Calculating chart data...");
    return data.map((i) => i * 2);
  }, [data]);

  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

function DataVisualization() {
  const [data, setData] = useState([]);
  const deferredData = useDeferredValue(data);

  const handleDataChange = (e) => {
    const newData = Array(10000)
      .fill(0)
      .map(() => Math.floor(Math.random() * e.target.value));
    setData(newData);
  };

  return (
    <div>
      <input
        type="number"
        onChange={handleDataChange}
        placeholder="Enter a number"
      />
      <ExpensiveChart data={deferredData} />
    </div>
  );
}

export default DataVisualization;

import React, { useId } from "react";

function AccessibleForm() {
  const id = useId();

  return (
    <form>
      <div>
        <label htmlFor={`${id}-name`}>Name:</label>
        <input id={`${id}-name`} type="text" />
      </div>
      <div>
        <label htmlFor={`${id}-email`}>Email:</label>
        <input id={`${id}-email`} type="email" />
      </div>
      <div>
        <label htmlFor={`${id}-password`}>Password:</label>
        <input id={`${id}-password`} type="password" />
      </div>
    </form>
  );
}

export default AccessibleForm;

import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Link, Routes } from 'react-router-dom';

const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));
const Contact = lazy(() => import('./Contact'));

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

        <Suspense fallback={<div>Loading...</div>}>
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/about" element={<About />} />
            <Route path="/contact" element={<Contact />} />
          </Routes>
        </Suspense>
      </div>
    </Router>
  );
}

export default App;

// Home.js
export default function Home() {
  return <h2>Home</h2>;
}

// About.js
export default function About() {
  return <h2>About</h2>;
}

// Contact.js
export default function Contact() {
  return <h2>Contact</h2>;
}

function NameForm() {
  const [name, setName] = React.useState("");

  const handleChange = (event) => {
    setName(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault(); // 阻止表单默认提交行为
    alert("A name was submitted: " + name);
  };

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

function DelayedLogger() {
  const handleClick = (event) => {
    event.persist(); // 允许在异步回调中访问事件属性
    setTimeout(() => {
      console.log(event.type); // 'click'
    }, 1000);
  };

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

function KeyDetector() {
  const handleKeyPress = (event) => {
    if (event.key === "Enter") {
      console.log("Enter key pressed");
    }
  };

  return <input onKeyPress={handleKeyPress} />;
}

function StopPropagation() {
  const handleParentClick = () => {
    console.log("Parent clicked");
  };

  const handleChildClick = (event) => {
    event.stopPropagation(); // 阻止事件冒泡到父元素
    console.log("Child clicked");
  };

  return (
    <div
      onClick={handleParentClick}
      style={{ padding: "20px", backgroundColor: "lightblue" }}
    >
      Parent
      <button onClick={handleChildClick}>Child</button>
    </div>
  );
}

function NativeEventAccess() {
  const handleClick = (event) => {
    console.log("React synthetic event:", event);
    console.log("Native DOM event:", event.nativeEvent);
  };

  return <button onClick={handleClick}>Click for native event</button>;
}

import ReactDOMServer from "react-dom/server";
import App from "./App";

function handleRequest(req, res) {
  const html = ReactDOMServer.renderToString(<App />);

  res.send(`
    <!DOCTYPE html>
    <html>
      <head>
        <title>My React App</title>
      </head>
      <body>
        <div id="root">${html}</div>
        <script src="/bundle.js"></script>
      </body>
    </html>
  `);
}

import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.hydrate(<App />, document.getElementById("root"));

// JSX
<div className="my-class" onClick={handleClick}>
  ...
</div>;

// 编译后的JavaScript
React.createElement(
  "div",
  { className: "my-class", onClick: handleClick },
  "..."
);

import React, { useState } from "react";
import { createPortal } from "react-dom";

function Modal({ children, onClose }) {
  return createPortal(
    <div className="modal-overlay">
      <div className="modal-content">
        {children}
        <button onClick={onClose}>关闭</button>
      </div>
    </div>,
    document.body
  );
}

function App() {
  const [showModal, setShowModal] = useState(false);

  return (
    <div>
      <button onClick={() => setShowModal(true)}>打开模态框</button>
      {showModal && (
        <Modal onClose={() => setShowModal(false)}>
          <h2>这是一个模态框</h2>
          <p>模态框内容...</p>
        </Modal>
      )}
    </div>
  );
}

function MyComponent() {
  const htmlContent = "<p>这是一些<strong>HTML</strong>内容</p>";

  return <div dangerouslySetInnerHTML={{ __html: htmlContent }} />;
}

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

function MyComponent() {
  const htmlContent = "<p>这是一些<strong>HTML</strong>内容</p>";

  return <div dangerouslySetInnerHTML={{ __html: htmlContent }} />;
}

const html = ReactDOM.renderToString(<MyComponent />);

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

function MyComponent() {
  const htmlContent = "<p>这是一些<strong>HTML</strong>内容</p>";

  return <div dangerouslySetInnerHTML={{ __html: htmlContent }} />;
}

const html = ReactDOM.renderToStaticMarkup(<MyComponent />);

import React from "react";
import ReactDOM from "react-dom";
import { renderHTML } from "react-html-parser";

function MyComponent() {
  const htmlContent = "<p>这是一些<strong>HTML</strong>内容</p>";

  return <div>{renderHTML(htmlContent)}</div>;
}

import React, { useEffect, useRef } from "react";

function MyComponent() {
  const divRef = useRef(null);

  useEffect(() => {
    if (divRef.current) {
      divRef.current.innerHTML = "<p>这是一些<strong>HTML</strong>内容</p>";
    }
  }, []);

  return <div ref={divRef} />;
}

import ReactDOMServer from "react-dom/server";
import App from "./App";

ReactDOMServer.renderToString(<App />);

import { useNavigate } from "react-router-dom";

function MyComponent() {
  const navigate = useNavigate();

  const handleClick = () => {
    navigate("/about");
  };

  return <button onClick={handleClick}>Go to About</button>;
}

import { Link } from "react-router-dom";

function MyComponent() {
  return <Link to="/about">Go to About</Link>;
}

import { Navigate } from "react-router-dom";

function MyComponent() {
  const shouldRedirect = true;

  if (shouldRedirect) {
    return <Navigate to="/about" />;
  }

  return <div>Normal content</div>;
}

import { withRouter } from "react-router-dom";

class MyComponent extends React.Component {
  handleClick = () => {
    this.props.history.push("/about");
  };

  render() {
    return <button onClick={this.handleClick}>Go to About</button>;
  }
}

export default withRouter(MyComponent);

import { useHistory } from "react-router-dom";

function MyComponent() {
  const history = useHistory();

  const handleClick = () => {
    history.push("/about");
  };

  return <button onClick={handleClick}>Go to About</button>;
}

// 路由配置
    const renderState = (path: string): { activeTab: string } | {} => {
      if (path === '/config/orgManagement' && type) {
        return {
          activeTab: type,
        };
      }
      return {}
    }
    for (let i = 0; i < routes.length; i++) {
      const route = routes[i]

      if (location.pathname.startsWith(route.path)) {
        matchedRoutes.push({
          title:
            route.element && route.path !== location.pathname ? (
              <Link to={route.path} state={renderState(route.path)}>{route.label}</Link>
            ) : (
              route.label
            ),
        })
        if (route.children?.length) {
          loopThroughRouting(route.children, matchedRoutes)
        }
      }
    }

import API from "./API"
import Database from "./Database"
import { Tabs, type TabsProps } from 'antd'
import './index.less'
import { useLocation, useNavigate } from "react-router-dom";
import { useEffect, useState } from "react";


export default function OrgManagement() {
  const location = useLocation();
  console.log(location, 'locationlocation');
  const [activeKey, setActiveKey] = useState('1')
  const navigate = useNavigate();

  const items: TabsProps['items'] = [
    {
      key: '1',
      label: '数据库',
      children: <Database />,
    },
    {
      key: '2',
      label: 'API',
      children: <API />,
    },
  ]

  useEffect(() => {
    if (location.state?.activeTab) {
      const { activeTab } = location.state
      setActiveKey(activeTab === 'api' ? '2' : '1')
      navigate(location.pathname, { replace: true, state: {} });
    }
  }, [])

  return (
    <div className="orgManagement">
      <Tabs
        activeKey={activeKey}
        onChange={key => setActiveKey(key)}
        className="tabs"
        items={items}
      />
    </div>
  )

}