理解ins中的React

正在寻找快速掌握 React 基础知识的方法吗？是否对冗长的教程感到不知所措？只需 5 分钟，您就可以学到足够的知识来阅读和理解大多数 React 代码。

目录

• 什么是 React？
• 核心概念
• 常见模式
• 将它们放在一起
• 就是这样！

什么是反应？

React 是一个 JavaScript 库，用于构建按钮或表单等 UI。

想象一下用乐高积木进行建造。您不用建造一座大城堡，而是使用连接在一起的较小的、可重复使用的部件来建造。 React 允许您使用称为“组件”的可重用部件构建 Web 界面。

React 代码如下：

// A simple React component
function Greeting() {
  return <h1 id="Hello">Hello!</h1>;
}

这种特殊的语法称为 JSX - 它允许您在 JavaScript 中编写类似 HTML 的代码。

React 可以帮助您：

• 将复杂的 UI 分解为可管理的部分
• 使用虚拟 DOM 系统高效处理 UI 和数据
• 数据发生变化时自动更新网页

核心概念

1. 组件 ?

组件就像 React 中的乐高积木。它们是可重复使用的 UI 部件，您可以组合起来。

// A simple component
function Welcome({ name }) {
  return <h1 id="Hello-name">Hello, {name}!</h1>;
}

// Using it
<welcome name="Alice"></welcome>

2.道具？

Props 是传递给组件的数据 - 就像函数参数一样。

// 'name' and 'age' are passed to UserCard() as props
function UserCard({ name, age }) {
  return (
    <div>
      <h2 id="name">{name}</h2>
      <p>Age: {age}</p>
    </div>
  );
}

<usercard name="Alice" age="{25}"></usercard>

注意：道具是只读的。

3. 状态？

状态是可以改变的数据。当它发生变化时，React 会自动更新 UI。

function LikeButton() {
  // 'likes' is state
  // 'setLikes' is function to update the state
  const [likes, setLikes] = useState(0);

  return (
    <button onclick="{()"> setLikes(likes + 1)}>
      Likes: {likes}
    </button>
  );
}

注意：useState(0) 设置初始值为 0 的状态（更多关于 Hooks 的信息见下文）。

4. 钩子？

Hooks 是让组件使用 React 功能的函数。他们总是以“使用”开头。

• useState：用于管理变化的数据（状态）
  

  const [count, setCount] = useState(0); // Initialize count with 0
  

• useEffect：用于在特定时间运行代码（如 API 调用）
  

  useEffect(() => {
      fetchData(); // Get data
  }, []);          // Run once when page loads
  

常见模式

条件渲染

根据条件显示不同的内容：

function Greeting({ isLoggedIn }) {
  return isLoggedIn
   ? <h1 id="Welcome">Welcome!</h1>
   : <h1 id="Please-log-in">Please log in</h1>;
}

当isLoggedIn为true时，显示“欢迎！”，否则显示“请登录”。

用法：

<greeting isloggedin="{true}"></greeting>   // "Welcome!"
<greeting isloggedin="{false}"></greeting>  // "Please log in"

事件处理

处理点击等用户交互：

function ToggleButton() {
 // Track button state (ON/OFF)
  const [isOn, setIsOn] = useState(false);

  return (
    <button onclick="{()"> setIsOn(!isOn)}>
      {isOn ? 'ON' : 'OFF'}
    </button>
  );
}

单击时，按钮文本会在“ON”和“OFF”之间切换。

用法：

<togglebutton></togglebutton>  // Shows: "OFF" by default

把它们放在一起？

这是一个使用我们所学知识的真实示例：

function LikeButton({ initialLikes = 0 }) {
  const [likes, setLikes] = useState(initialLikes);

  return (
    <button onclick="{()"> setLikes(likes + 1)}>
      {likes === 0 ? '♡' : '?'} {likes > 0 && likes}
    </button>
  );
}

这个 LikeButton 组件：

• 获得初始点赞算作道具
• 计数为0时显示空心(♡)
• 当喜欢>时显示带有数字的粉红心（？） 0
• 点击时更新心脏和计数

使用示例：

// A simple React component
function Greeting() {
  return <h1 id="Hello">Hello!</h1>;
}

就是这样！ ？

您现在已经了解了 React 基础知识！虽然还有更多东西需要学习，但您可以理解您看到的大多数 React 代码。

准备好开始了吗？

创建 React 项目有多种方法：

• Next.js：全栈React框架，推荐用于大多数新项目
• Gatsby： 用于快速 CMS 支持的网站的 React 框架
• Vite: 现代且快速的构建工具，非常适合学习 React 和构建单页应用程序

详细信息在这里。

编码快乐✨

以上是理解ins中的React的详细内容。更多信息请关注PHP中文网其他相关文章！