文章目录
参考文献：
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 (<><imgsrc={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>);
};
两个MyButton组件共享的是同一个count
二、React哲学
1.将UI拆解为组件层级结构
原则：
- 程序设计：单一功能原理（一个组件理想情况下应仅做一件事情。随着功能的持续增加，应该被持续的分解为更小的子组件）
2.使用React构建一个静态版本
原则：
- 组件自上而下
- 静态页面不需要考虑交互，只需要考虑布局样式和数据的结构
静态版本构建组件之间的层级关系
3.找出 UI 精简且完整的 state 表示
写state的原则是：保持精简且完整（不重复原则）；比如说用了一个state存下学生信息列表，那么就不需要在用另外一个state存学生信息列表的长度。因为这是冗余的。
state验证：其中哪些是 state 呢？标记出那些不是的:
- 随着时间推移 保持不变？如此，便不是 state。
- 通过 props 从父组件传递？如此，便不是 state。
- 是否可以基于已存在于组件中的 state 或者 props 进行计算？如此，它肯定不是state！
4.验证 state 应该被放置在哪里
React 使用单向数据流，通过组件层级结构从父组件传递数据至子组件。要搞清楚哪个组件拥有哪个 state。
验证每一个基于特定 state 渲染的组件。
寻找它们最近并且共同的父组件——在层级结构中，一个凌驾于它们所有组件之上的组件。
决定 state 应该被放置于哪里:
- 通常情况下，你可以直接放置 state 于它们共同的父组件。
- 你也可以将 state 放置于它们父组件上层的组件。
- 如果你找不到一个有意义拥有这个 state 的地方，单独创建一个新的组件去管理这个 state，并将它添加到它们父组件上层的某个地方。
5.添加反向数据流
用户输入-> 改变state
