React 基础

命令

# 项目创建
npx create-react-app 名称

# 启动项目
npm start

# 启动项目
npm run dev

# 安装项目依赖
npm install

# 构建项目
npm run build

导入

import 组件名 from './组件文件.js';
import { 具名组件 } from './组件文件.js';

组件

定义组件

function 名称() { }

默认导出组件

export default function 名称() { }

具名导出组件

export function 名称() { }

返回标签

return <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />;

return (
  <div>
    <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  </div>
);

语法

大括号使用

<img className={avatar} src={avatar}/>

<h1>{name}'s To Do List</h1>

<h1>To Do List for {formatDate(today)}</h1>

双大括号

双大括号包裹的是对象

<ul style={
  {
    backgroundColor: 'black',
    color: 'pink'
  }
}>

对象创建与使用

const person = {
  name: 'Gregorio Y. Zara',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

<h1 style={person.theme}>{person.name}'s Todos</h1>

JSX

JSX规则 用于返回多个根元素
<></>

传递参数

function Avatar({ person, size = 100 }) {
  // ...
}

<Avatar person={{ name: 'Lin Lanying', imageId: '1bX5QH6' }} size={100} />

function Avatar(props) {
  let person = props.person;
  let size = props.size;
  // ...
}

<Avatar person={{ name: 'Lin Lanying', imageId: '1bX5QH6' }} size={100} />

// 将父组件的props值全部传递给子组件
<Avatar {...props} />

children

组件嵌套

function Card({ children }) {
  return (
    <div>
      {children}
    </div>
  );
}

function Profile() {
  return (
    <Card>
      <Avatar />
    </Card>
  );
}

map 列表

const listItems = 数组.map(变量 =>
  <li>...</li> // 隐式地返回！
);

const listItems = 数组.map(变量 => { // 花括号
  return <li>...</li>;
});

条件渲染

function 组件名() {
  if (条件){
    return HTML标签;
  }
  return HTML标签;
}

描述

也可以返回 null

三目运算符

条件? 内容1 : 内容2

描述

条件为true时返回内容1, 条件为false时返回内容2

条件? 内容1

描述

只有条件满足时渲染

for

for (let i = 1; i <= 12; i++) {
    // 代码
}

switch

switch (变量){
    case 值1:
        return HTML标签
    case 值2:
        return HTML标签
    default:
        return HTML标签
}

onClick

<button onClick={onClick}></button>

function onClick(e) {
    // e 是触发此事件函数的组件
}

<button onClick={() => {
  onClick(值)
}}></button>

<button onClick={e => onClick(值)}></button>

useState

状态

const [person, setPerson] = useState(默认值);

// 设置新值
setIndex(值);

// 状态更改
setIndex({
  ...person,
  name: 新值
});

setIndex({
      ...person,
      artwork: {
        ...person.artwork,
        title: 新值
      }
});

// 在下次渲染前多次更新同一个 state
setIndex(变量 => 值);

描述

设置变量名用于设置的变量名默认值

更新 state 中的对象

state 中可以保存任意类型的 JavaScript 值，包括对象。但是，你不应该直接修改存放在 React state 中的对象。相反，当你想要更新一个对象时，你需要创建一个新的对象（或者将其拷贝一份），然后将 state 更新为此对象。

// 属性的动态命名
 function handleChange(e) {
    setPerson({
      ...person,
      [e.target.name]: e.target.value
    });
}

筛选

setArtists(
  数组.filter(a => a.id !== artist.id)
);

强制重置组件

只需要给组件key赋予状态值当状态改变时组件也会跟着重置

<组件 key={状态.值}/>

Context

// 定义
const LevelContext = createContext(0);

// 获取
const level = useContext(LevelContext);

描述

定义的对象名称大写

可以单独在一个文件内定义

// 子组件获取 Context对象 值时会获取上层最近组件传递的值

<Context对象.Provider value={值}>
    子组件
</Context对象.Provider>

事件

事件命名都是以handle开头

<button onClick={function handleClick() {
  alert('你点击了我！');
}}>

<button onClick={() => {
  alert('你点击了我！');
}}>

阻止事件传播

在子组件触发的事件函数中运行,

e.stopPropagation();

描述

阻止因点击子组件而触发父组件的事件行为

阻止浏览器默认行为

e.preventDefault();