react的1.函数组件2.usestate3.useeffect4.ref5.fragment6.contex 代码加注释

React是一种流行的JavaScript库,用于构建用户界面。它提供了许多有用的功能,其中包括函数组件、useState、useEffect、ref、fragment和context。在本文中,我们将深入探讨这些功能,并提供代码示例和注释。

1.函数组件

函数组件是React中最简单的组件类型之一。它们是纯函数,接受一些输入并返回一个React元素。下面是一个简单的函数组件示例:

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

这个函数组件接受一个名为props的对象参数,并返回一个h1元素,其中包含一个问候语和props.name的值。在React中,可以通过将组件名称作为标签使用来渲染函数组件,就像这样:

<Welcome name="Alice" />

这将渲染一个

元素,其中包含“Hello, Alice!”的文本。

2.useState

useState是React提供的一个钩子函数,用于在函数组件中添加状态。它接受一个初始状态值,并返回一个数组,其中第一个元素是当前状态值,第二个元素是更新状态值的函数。下面是一个示例:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

在这个例子中,我们使用useState来添加一个计数器状态。我们定义了一个名为count的状态变量,并使用setCount函数来更新它。我们还定义了一个名为handleClick的函数,该函数在按钮点击时将计数器值增加1。最后,我们将计数器值和按钮元素呈现在页面上。

3.useEffect

useEffect是React提供的另一个钩子函数,用于在函数组件中添加副作用。副作用是指在组件渲染期间发生的任何事情,例如从API获取数据、订阅事件或更改DOM元素。下面是一个示例:

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

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

在这个例子中,我们使用useEffect来更新页面标题。我们定义了一个匿名函数,该函数在组件渲染后运行,并将页面标题设置为当前计数器值。每次计数器值更改时,该函数都会再次运行,以便更新页面标题。

4.ref

ref是React提供的一个特殊属性,用于访问DOM元素或组件实例。它通常用于处理表单输入、媒体播放器或其他需要直接访问DOM元素的功能。下面是一个示例:

import React, { useRef } from 'react';

function TextInput() {
  const inputRef = useRef(null);

  function handleClick() {
    inputRef.current.focus();
  }

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Focus input</button>
    </div>
  );
}

在这个例子中,我们使用useRef来创建一个名为inputRef的引用。我们将此引用传递给元素的ref属性,以便我们可以在handleClick函数中访问它。当按钮被点击时,我们调用focus()方法,该方法将焦点设置为输入元素。

5.fragment

fragment是React提供的一个特殊元素,用于将多个子元素分组在一起,而无需向DOM添加额外的节点。下面是一个示例:

import React from 'react';

function List() {
  return (
    <>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </>
  );
}

在这个例子中,我们使用<>标记来创建一个fragment元素。我们将三个

  • 元素包装在fragment中,以便我们可以将它们作为单个元素呈现在页面上。

    6.context

    context是React提供的一种机制,用于在组件之间共享数据,而无需通过props进行传递。它通常用于主题、用户身份验证或其他需要全局访问的数据。下面是一个示例:

    import React, { createContext, useContext } from 'react';
    
    const ThemeContext = createContext('light');
    
    function ThemeButton() {
      const theme = useContext(ThemeContext);
    
      return (
        <button style={{ background: theme === 'dark' ? 'black' : 'white', color: theme === 'dark' ? 'white' : 'black' }}>
          {theme === 'dark' ? 'Dark' : 'Light'} theme
        </button>
      );
    }
    
    function App() {
      return (
        <ThemeContext.Provider value="dark">
          <ThemeButton />
        </ThemeContext.Provider>
      );
    }
    

    在这个例子中,我们使用createContext来创建一个名为ThemeContext的上下文。我们定义了一个名为ThemeButton的组件,并使用useContext钩子来访问ThemeContext的值。我们还定义了一个名为App的组件,并在其中包装元素,以便我们可以将ThemeContext的值设置为“dark”。最后,我们将元素呈现在页面上,并根据主题值更改按钮的样式和文本。

  • 你可能感兴趣的:(React,react.js,前端,javascript)