初步学习react记录

80 阅读1分钟

逐渐认识

1.jsx格式将内容包裹在圆括号中,避免自动插入分号陷阱。

2.jsx可以当作普通对象进行使用,如返回值、变量、传参等。

3.JSX 防止注入攻击: React DOM 在渲染所有输入内容之前,默认会进行转义。 它可以确保在你的应用中,永远不会注入那些并非自己明 确编写的内容。所有的内容在渲染之前都被转换成了字符 串。这样可以有效地防止 XSS(cross-site-scripting, 跨 站脚本)攻击。 (这里说的不是很清楚,去查一下)

4.babel会将jsx转译成一个名为react.createElement()函数调用

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);
// ===
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);
//之后返回了对象
//如下是简化过的结构
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

5.除了函数式组件,还有继承class实现的组件

6.组件名称必须以大写字母开头(和原生dom标签分开)

7.提取组件原则:

(1)多次使用

(2)组件本身足够复杂

8.所有 React 组件都必须像纯函数一样保护它们的 props 不被更改,

但state 允许 React 组件随用户操作、网络响应或者其他变化而动态更改输出内容

9.Class 组件应该始终使用 props 参数来调用父类的构造函数

10.一个标签里面没有内容,你可以使用 /> 来闭合标签

11.JSX 里的 class 变成了 className,而 tabindex 则变为 tabIndex