大年初七的学习 | 青训营笔记

这是我参与「 第五届青训营 」伴学笔记创作活动的第 14 天。

前言

今天是 2023 年 1 月 28 日星期六，癸卯年正月初七。

依然祝大家兔年快乐🐰

今天我写一些关于 React 框架的学习笔记。React 是一个用于构建用户界面的 JavaScript 库。React 主要用于构建 UI，很多人认为 React 是 MVC 中的 V（视图）。React 起源于 Facebook ，也就是现在 Meta 公司的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。React 拥有较高的性能，代码逻辑非常简单，越来越多的人在关注和使用它，尤其在欧美地区比较流行。

React.js 特点

1. 声明式设计： React采用声明范式，可以轻松描述应用。
2. 高效： React通过对DOM的模拟，最大限度地减少与DOM的交互。
3. 灵活： React可以与已知的库或框架很好地配合。
4. JSX： JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
5. 组件： 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
6. 单向响应的数据流： React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单的原因。

React Props

React state （状态） 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。 实例：

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

const element = <HelloMessage name="Test"/>;

ReactDOM.render(
	element,
	document.getElementById('example')
);

我们可以在父组件中设置 state， 并通过在子组件上使用 props 将其传递到子组件上。在 render 函数中, 我们设置 name 和 site 来获取父组件传递过来的数据。

React 事件处理

React 元素的事件处理和 DOM 元素类似。但是有一点语法上的不同:

• React 事件绑定属性的命名采用驼峰式写法，而不是小写。
• 如果采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串(DOM 元素的写法)

HTML 通常写法是：

<button onclick="activateLasers()">
  激活按钮
</button>

React 中写法为：

<button onClick={activateLasers}>
  激活按钮
</button>

在 React 中另一个不同是你不能使用返回 false 的方式阻止默认行为，必须明确使用 preventDefault。