阮一峰React入门教程学习笔记

Posted on | | Visitors:
Words count in article: 1,188 字 | Reading time ≈ 5 分

虽然已经看视频学了一些React基础，看完阮一峰的教程还是对React有了更多的理解。

他的教程感觉还是很简洁明了的，误区、重点都有讲到。

以下为阮一峰React入门教程学习笔记，记录了一些学到的新的或重要的知识点。

文中标题与阮一峰教程中章节标题对应。

安装

React 可以在浏览器运行，也可以在服务器运行。

HTML模板

模板

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>	//react核心库
    <script src="../build/react-dom.js"></script>	//提供dom相关功能
    <script src="../build/browser.min.js"></script>	//将JSX转为JS，很耗时间，应用上线时应将这一步放在服务器完成
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      // ** Our code goes here! **
    </script>
  </body>
</html>

注意

JSX语法为React独有，与JS并不兼容，因此使用JSX语法的时候要加上type="text/babel"。

ReactDOM.render()

1
2
3
4
5
ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
  //h1可看作一个组件，插入id为example的DOM结点。
);

ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点，即挂载组件。

JSX语法

介绍

可以看React官网。

JSX是JS的语法扩展，它为React提供了元素。

为何使用JSX

React认为页面的渲染逻辑和UI设计的逻辑是耦合的：事件如何处理，状态如何随时间变化，以及数据如何准备显示。

React通过包含标记和逻辑的组件实现 separation of concerns。

React不是必须使用JSX，但JSX使包含UI的JS代码更加容易处理，同时也可以暴露出更多有用的报错和警告信息。

基本语法

遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。

它允许HTML和JavaScript的混写。

JSX 允许直接在模板插入 JavaScript 变量，JSX中的大括号内可以放置任何有效的JavaScript表达式。

组件

render

所有组件类都必须有自己的 render 方法，用于输出组件。

组件名

组件类的第一个字母必须大写，否则会报错。

一个顶层标签

组件类只能包含一个顶层标签，否则也会报错。

传参

组件的用法与原生的 HTML 标签完全一致，可以任意加入属性，比如 <HelloMessage name="John"> ，就是 HelloMessage 组件加入一个 name 属性，值为 John。组件的属性可以在组件类的 this.props 对象上获取，比如 name 属性就可以通过 this.props.name 读取。

保留字问题

添加组件属性，有一个地方需要注意，就是 class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字。

this.props.children

this.props 对象的属性与组件的属性一一对应，但是有一个例外，就是 this.props.children 属性。它表示组件的所有子节点。

PropTypes

组件类的PropTypes属性，用来验证组件实例的属性是否符合要求。

getDefaultProps 方法可以用来设置组件属性的默认值。

获取真实DOM结点

组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。

有时需要从组件获取真实 DOM 的节点，这时就要用到 ref 属性。

this.refs.[refName] 属性获取的是真实 DOM ，所以必须等到虚拟 DOM 插入文档以后，才能使用这个属性，否则会报错。

this.state

React 的一大创新，就是将组件看成是一个状态机。

每次修改this.setState以后，自动调用 this.render 方法，再次渲染组件。

表单

要获取用户输入，需要定义一个 onChange 事件的回调函数，通过 event.target.value 读取用户输入的值。

组件的生命周期

组件的三种状态

组件的生命周期分成三个状态：

  • Mounting：已插入真实 DOM
  • Updating：正在被重新渲染
  • Unmounting：已移出真实 DOM

状态的处理函数

will 函数在进入状态之前调用，did函数在进入状态之后调用，三种状态共计五种处理函数。

  • componentWillMount()
  • componentDidMount()
  • componentWillUpdate(object nextProps, object nextState)
  • componentDidUpdate(object prevProps, object prevState)
  • componentWillUnmount()

特殊状态的处理函数

  • componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用
  • shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用

React 组件样式是一个对象。

Ajax

==还没学==

作者：@臭咸鱼

本文为作者原创，转载请注明出处：https://chouxianyu.github.io

欢迎转发和评论!