react文档阅读笔记

最新推荐文章于 2025-04-20 07:03:18 发布

shifff

最新推荐文章于 2025-04-20 07:03:18 发布

阅读量1k

点赞数 24

文章标签： react.js 笔记前端

本文链接：https://blog.youkuaiyun.com/shifff/article/details/143156968

版权

参考文献：
react中文官方文档
MND

一、基础入门

1. 创建声明一个组件

function MyButton() {
  return (
    <button>Content</button>
  );
}

2. 使用组件

如果在不同的页面，要先引入才能使用

export default function MyApp() {
  return (
    <div>
      <h1>Hello!</h1>
      <MyButton />
    </div>
  );
}

要点：
React组件必须以大写字母开头
HTML标签必须以小写字母开头

3. JSX标签语法

    <div>
      <h1>Hello!</h1>
      <MyButton />
    </div>

要点：
标签必须闭合
不能返回多个JSX，多个JSX必须由空标签<></>或者<div></div>包裹

HTML->JSX: 在线转换器

4. 给组件添加样式

<img classNmae="bgPic" />

样式文件

.bgPic {
  border-radius: 50%;
}

可以使用link标签将样式挂在文档上

5.在JSX中使用JS代码

使用中括号

const user = {
 name: '小巧',
 age: 18,
 gender: male,
}
return (
  <div>
    <h1>{user.name}</h1>
    <h2>{user.age}</h2>
    <h2>{user.gender === 'male' ？ '男' : '女'}</h2>
  </div>
);

6.在JS中使用JSX

使用大括号

return (
  <div>
    hello！
  </div>
);

7.内联样式

export default function Profile() {
  const user = {
    name: 'Hedy Lamarr',
    imageUrl: 'https://i.imgur.com/yXOvdOSs.jpg',
    imageSize: 90,
  };
  return (
    <>
      <img
        src={user.imageUrl}
        style={{
          width: user.imageSize,
          height: user.imageSize
        }}
      />
    </>
  );
}

8.条件渲染

// 方法1
if (条件1) {
  组件1
} else (
  组件2
)

// 方法2
{条件1 ? 组件1 : 组件2}
{条件1 && 组件1}
{条件2 && 组件2}

9.列表渲染

列表

const list = [
  {name: 'bob', age: 18, gender: 'male'},
  {name: 'jack', age: 28, gender: 'male'},
  {name: 'lucy', age: 19, gender: 'female'},
];

渲染

  {list && list.map(stu => {
    return (
      <div>
        <h1>stu.name</h1>
        <h1>stu.age</h1>
        <h1>stu.gender</h1>
      </div>
    );
  })}

10.事件处理

在组件中声明事件处理函数

function MyButton() {
  const handleClick = () => {
    console.log('you clicked me');
  };
  
  return (
    <button onClick={handleClick}>Click me</button>
  );
}

11.更新页面（状态记录）

react中的useState函数

import { useState } from 'react';

function MyButton() {
  const [cnt, setCnt] = useState(0);
  
  const hanleClick = () => {
    setCnt(cnt + 1);
  };

  return (
    <button onClick={handleClick}> has Clicked {cnt} times</button>
  );
}

useState中可以拿到两样东西，记录的状态值和用来改变该状态值的函数，命名按照[something, setSomething]的规范
state的变化会导致页面的更新

如果多次渲染MyButton组件，每一个MyButton组件中的state的是隔离的，他们拥有各自自己的state，不会相互影响。

12.react的hook函数

特点：

以use开头的函数
react由内置hook函数（如useState），也可以自己编写hook函数
hook函数只能在组件（或者其他hook）的顶层调用
如果想在一个条件或循环中使用 useState，请提取一个新的组件并在组件内部使用它。

13.组件间的数据共享

父传子

（通过“状态提升”实现组件之间共享数据，只适用于层数不深的情况）
// 父组件
export default function MyApp() {
  const [cnt, setCnt] = useState(0);
  const handleClick = () => {
    setCnt(cnt + 1);
  };
  return (
    <>
      <MyButton count={cnt} onClick={handleClick} />
      <MyButton count={cnt} onClick={handleClick} />
    </>
  );
}

// 子组件
function MyButton(props){
  const { count, onClick } = props;
  return (
    <button onClick={onClick}> has been Clicked {count} times</button>
  );
};