React的基本概念

1.为什么要用react

组件化开发: React 鼓励使用组件化的方式来构建应用。这种方法使得应用更易于维护和扩展，因为每个组件都是独立的，可以重用，而且组件之间的隔离性能够降低 Bug 出现的概率。

虚拟 DOM (Virtual DOM): React 引入了虚拟 DOM 的概念，它在内存中维护一个轻量级的 DOM 表示，React 可以高效地对比这个虚拟 DOM 和实际 DOM 的差异，然后只更新必要的部分，从而提高应用的性能。

声明式编程: React 使用声明式编程风格。你只需要描述你想要页面显示的内容，而不需要关心具体的 DOM 操作。React 会根据你的描述自动处理 DOM 更新。

2.react在代码层面如何实现页面的渲染？

React 应用程序是由组件组成的。一个组件是 UI（用户界面）的一部分
React 组件是返回标签的 JavaScript 函数，通过return标签来说明想要渲染的画面
注：React 组件必须以大写字母开头，而 HTML 标签则必须是小写字母

3.在写react的标签时，语法有什么规范？

标签语法被称为JSX，一些基本的规范如下：
- 必须包裹在同一个共享父级中
- 使用className管理组件样式
- 使用{}包裹js变量

4.如何在react中实现条件渲染？

使用？或&&等运算符

<div>
  {isLoggedIn? (
    <AdminPanel/>
  ): (
    <LoginForm/>
  )}
</div>

5.如何在react中渲染列表？

使用map()/for循环

constlistItems= products.map(product=>
  <likey={product.id}>
    {product.title}
  </li>
);
return(
  <ul>{listItems}</ul>
);

map不会改变原数组，返回一个由return的值组成的新数组

6.react如何完成组件的事件响应？

声明组件的事件处理函数

function MyButton() {
  function handleClick() {
    alert('You clicked me!');
  }

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

7.如何完成组件间state的数据共享并一起更新view(即组件间的通讯)？

将state上移，并通过props的方式将state和setState传递给不同的子组件即可

8.React hook的优势

React 早就支持函数组件，

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

但是，这种写法有重大限制，必须是纯函数，不能包含状态，也不支持生命周期方法，因此无法取代类。
React Hooks 的设计目的，就是加强版函数组件，完全不使用"类"，就能写出一个全功能的组件。
React Hooks 的意思是，组件尽量写成纯函数，如果需要外部功能和副作用，就用钩子把外部代码"钩"进来. React Hooks 就是那些钩子。

Reference

https://zh-hans.react.dev/learn
https://www.ruanyifeng.com/blog/2019/09/react-hooks.html