React 核心概念

简单了解

• Components - 构建页面的组件
• Props - 向组件传递信息
• State - 记录/传递交互数据

Components

用户界面可以分解成称为组件的更小的构建块。

组件允许您构建自包含的、可重用的代码片段。如果你把组件想象成乐高积木，你可以把这些单独的积木组合在一起，形成更大的结构。如果需要更新 UI 的一部分，可以更新特定的组件或砖块。

创建组件

<script type="text/jsx">
  const app = document.getElementById("app")

  // 组件是一个返回 UI 元素的函数
  // 主件名首字母必须大写
  function Header() {
     return (<h1>Develop. Preview. Ship. 🚀</h1>)
   }

  // 用 ReactDOM.render 传递给 DOM
  // 使用尖括号 < > 传递参数
  ReactDOM.render(<Header />, app)
</script>

嵌套组件

function Header() {
  return <h1>Develop. Preview. Ship. 🚀</h1>;
}

function HomePage() {
  return (
    <div>
      {/* 在 HomePage 中嵌套 Header */}
      <Header />
    </div>
  );
}

ReactDOM.render(<HomePage />, app);

组件树

在 React 中，数据沿组件树流动。这被称为单向数据流。

Props

使用道具

// 向 Header commponents 传递 Props
function Header({ title }) {
  console.log(title);
  return <h1>{title}</h1>;
}

JSX land

• 使用'.'号引用属性

  function Header(props) {
    return <h1>{props.title}</h1>;
  }

• 模板文字

  function Header({ title }) {
    return <h1>{`Cool ${title}`}</h1>;
  }

• 调用函数

  function createTitle(title) {
    if (title) {
      return title;
    } else {
      return 'Default title';
    }
  }
  
  function Header({ title }) {
    return <h1>{createTitle(title)}</h1>;
  }

• 三元运算符

  function Header({ title }) {
    return <h1>{title ? title : 'Default Title'}</h1>;
  }

迭代列表

function HomePage() {
  const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];

  return (
    <div>
      <Header title="Develop. Preview. Ship. 🚀" />
      <ul>
        {/* 使用 array.map ()方法迭代数组，并使用箭头函数将名称映射到列表项 */}
		{/* React 需要 key 来唯一标识数组中的项更新元素 */}
        {names.map((name) => (
          <li key={name}>{name}</li>
        ))}
      </ul>
    </div>
  );
}

State

React 有一组叫做 Hook 的函数。钩子允许您向组件添加额外的逻辑，比如状态。
可以将状态视为 UI 中随时间变化的任何信息，通常由用户交互触发。

使用状态

function HomePage() {
  // useState() 返回一个数组
  // 数组中的第一项是状态值 这里设置初始值为0
  // 数组中的第二项是更新值的使用的函数
  const [likes, setLikes] = React.useState(0);

  function handleClick() {
    setLikes(likes + 1);
  }

  return (
    <div>
      {/* 每点击一次更新状态值 */}
      <button onClick={handleClick}>Likes ({likes})</button>
    </div>
  );
}

---

React Core Concepts - From JavaScript to React | Learn Next.js (nextjs.org)