react入门视频教程（react教程,看这篇就够了）



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

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

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

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

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

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

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

可以看React官网。

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

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

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

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

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

它允许HTML和JavaScript的混写。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

React 组件样式是一个对象。

==还没学==

作者：@臭咸鱼

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

欢迎转发和评论!

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/yd-react-native/31594.html