React基础知识入门

组件

React官方文档对组件的描述:React 应用程序是由 组件 组成的。一个组件是 UI(用户界面)的一部分,它拥有自己的逻辑和外观。组件可以小到一个按钮,也可以大到整个页面。

官方文档地址:https://zh-hans.react.dev/

如何创建一个组件:通过JavaScript函数返回标签来创建

typescript 复制代码
function Button1() {
  return (
    <button>Button</button>
  )
}

创建嵌套的组件

typescript 复制代码
function Button() {
  return (
    <div>
      <button>Button</button>
    </div>
  )
}
function App() {
  return (
    <>
      <h1>Hello React</h1>
      <Button />
    </>
  )
}
export default App

以上的这种(通过JavaScript函数返回标签)语法是JSX,大多数 React 项目会使用 JSX,组件的首字母必须以大写开头,HTML标签全是小写字母,这样也便于区分是React组件还是HTML标签。你的组件不能返回多个JSX标签,可以使用一个共享的父级<div>...<div>或者空的<>...</>将它们包裹起来即可

为组件添加样式

通过className为组件指定一个样式,与HTML的class工作方式相同

typescript 复制代码
function Button() {
  return (
    <div>
      <button className="button1">Button</button>
    </div>
  )
}
// 样式
.button1 {
  background-color: #646cff;
  color: #fff;
}
为组件添加事件onClick

通过onClick为组件添加一个事件处理函数

typescript 复制代码
function handleClick() {
    alert('hello react')
  }
function Button({count, onClick}) {
  return (
    <div>
      <button className="button1" onClick={handleClick}>Button</button>
    </div>
  )
}
// 样式
.button1 {
  background-color: #646cff;
  color: #fff;
}
在组件中访问JavaScript变量

在组件中你可以访问JavaScript变量,通过大括号{}来访问变量例如obj.name

typescript 复制代码
const obj = {
  name: '按钮',
  size: '100px'
}
function Button({count, onClick}) {
  return (
    <div>
      <button className="button1" style={{ width: obj.size }}>{obj.name}</button>
    </div>
  )
}
条件渲染

就像编写普通JavaScript代码if语句一样来对组件进行条件渲染

typescript 复制代码
function Button() {
  return (
    <div>
      <button className="button">Button</button>
    </div>
  )
}
function Button1() {
  return (
    <div>
      <button className="button1">Button1</button>
    </div>
  )
}
const content = false
function App() {
  return (
    <>
      <h1>Hello React</h1>
      {
        content ? (<Button />) : (<Button1 />)
      }
    </>
  )
}
useState状态

有时候我们可能需要组件记住某个状态,比如一个按钮被点击的次数,想做到这一点可以在你的组件使用useState

先从React中引入useState并在组件中声明一个state变量,count为当前的值,setCount用来操作count的函数。count初始值为0,当点击按钮后调用setCount将count的值加1,这个count的值随着按钮的点击会不断的增加

typescript 复制代码
import { useState } from 'react'
const obj = {
  name: '按钮',
  size: '100px'
}
function Button1() {
  const [count, setCount] = useState(0)
  function handleClick() {
    setCount(count + 1)
  }
  return (
    <button className="button2" onClick={handleClick} style={{ width: obj.size }}>{obj.name}2</button>
  )
}
组件间共享数据 状态提升

有没有可能两个组件共享一个状态呢?比如有两个按钮点击其中一个按钮另一个的值也会实时更新。这就需要用到状态提升,其实就是类似于vue中父子组件之间传值,在React中这种传递信息的方式叫做prop,由父组件将state的值和事件处理函数handleClick传递给子组件,再由子组件去执行事件并更新state的值

typescript 复制代码
function Button({count, onClick}) {
  return (
    <div>
      <button className="button1" onClick={onClick} style={{ width: obj.size }}>{obj.name}: {count}</button>
    </div>
  )
}
function App() {
  const [count, setCount] = useState(0)
  function handleClick() {
    setCount(count + 1)
  }
  return (
    <>
      <h1>Hello World</h1>
      <div className='card'>
        <button onClick={handleClick}>count is {count}</button>
      </div>
      {
        content ? (<Button count={count} onClick={handleClick}  />) : (<Button1 />)
      }
      <Button onclick={handleClick} count={count}  />
    </>
  )
}
相关推荐
朝阳391 分钟前
Electron-vite【实战】MD 编辑器 -- 编辑区(含工具条、自定义右键快捷菜单、快捷键编辑、拖拽打开文件等)
javascript·electron·编辑器
神仙别闹1 分钟前
基于 HTML5 的画图工具
前端·html·html5
朝阳392 分钟前
Electron-vite【实战】MD 编辑器 -- 大纲区(含自动生成大纲,大纲缩进,折叠大纲,滚动同步高亮大纲,点击大纲滚动等)
javascript·electron·编辑器
X_StarX27 分钟前
web程序设计期末复习-填空题
前端·学习·html·web·大学生·期末考
几何心凉30 分钟前
4 年融资 1 亿美金,ProtonBase 背后的技术雄心 |专访小质科技 CEO 王绍翾
前端
得物技术31 分钟前
得物研发自测 & 前端自动化测试体系建设
前端·测试
是忽然之间1 小时前
vue对接帆软bi
前端
海底火旺1 小时前
从零实现语音合成:基于火山引擎TTS的前端实践
前端·人工智能·react.js
jackeyfive1 小时前
最快速搭建博客并部署到 GitHub Pages
前端·github
前端付豪1 小时前
汇丰实时风控数据流揭秘:Kafka + Flink + CEP 规则引擎全链路实战
前端·后端·架构