摘要：语法将语法直接加入到代码中，再通过翻译器装换到纯后由浏览器执行。事实上，并不需要花精力学习。可以说，基本语法基本被囊括了，但也有少许不同。明确的数据流动。这条原则让组件之间的关系变得简单且可预测。使用获取和显示回调。
JSX语法
JSX将HTML语法直接加入到JavaScript代码中，再通过翻译器装换到纯JavaScript后由浏览器执行。在实际开发中，JSX在产品打包阶段都已经编译成纯JavaScript，不会带来任何副作用，反而会让代码更加直观并易于维护。
事实上，JSX并不需要花精力学习。只要熟悉HTML标签，大多数功能就都可以直接使用了。
JSX语法完美地利用了JavaScript自带的语法和特性，并使用大家熟悉的HTML语法来创建虚拟元素。可以说，JSX基本语法基本被XML囊括了，但也有少许不同。
React组件
基本的封装性。
简单的生命周期呈现。
明确的数据流动。
React组件的构建方法
React.createClass
ES6 classes
无状态函数
React数据流
在React中，数据是自顶向下单向流动的，即从父组件到子组件。这条原则让组件之间的关系变得简单且可预测。state与props是React组件中最重要的概念。如果顶层组件初始化props，那么React会向下遍历整颗组件树，重新尝试渲染所有相关的子组件。而state只关心每个组件自己内部的状态，这些状态只能在组件内改变。把组件看成一个函数，那么它接受了props作为参数，内部由state作为函数的内部参数，返回一个Virtual DOM的实现。
React生命周期
组件的挂载与卸载：componentWillMount方法会在render方法之前执行，而componentDidMount方法会在render方法之后执行，分别代表了渲染前后的时刻。还有componentWillUnmount代表组件卸载前的状态，在这个方法中，我们常常会执行一些清理方法，如事件回收或是清除定时器。
更新过程是指父组件向下传递props或组件自身执行setState方法时发生的一系列更新动作。shouldComponentUpdate是一个特别的方法，它接受需要更新的props和state，让开发者增加必要的条件判断，让其在需要时更新，不需要时不更新。因此，当方法返回false的时候，组件不再向下执行生命周期方法。componentWillUpdate和componentDidUpdate这两个生命周期方法很容易理解，对应的初始化方法也很容易知道，他们代表在更新过程中渲染前后的时刻。
getDerivedStateFromProps(props, state)
在 render() 之前触发，不管是什么原因触发 render() 方法的,此方法应返回一个对象，用于更新 State, 或返回 null 不更新。
getSnapshotBeforeUpdate(prevProps, prevState)
在 Dom 改变之前获得一些最新的信息,此方法的一切返回值都将被传递给 componentDidUpdate 方法中的 snapshot 参数。
componentDidCatch(err, info)
catch js 错误，log 这些 errors，显示一个回调的 UI。
获取错误的时机：during rendering，生命周期函数和子组件的 constructor 函数。
使用 setState() 获取 unhandled JS errors 和 显示回调 UI。
ReactDOM
findDOMNode:React提供的获取DOM元素的方法有两种，其中一种就是ReactDOM提供的findDOMNode，当组件被渲染到DOM中，findDOMNode返回该React组件实例相应的DOM节点。
为什么说只有在顶层组件我们才不得不使用ReactDOM呢？这是因为要把React渲染的Virtual DOM渲染到浏览器的DOM当中，就要使用render方法了，该方法把元素挂载到container中，并且返回element的实例。
refs
在组件内，JSX是不会返回一个组件的实例的，它只是一个ReactElement，只是告诉React被挂载的组件应该长什么样。refs就是为此而生的，它是React组件中非常特殊的prop，可以附加到任何一个组件上。从字面意思来看，refs即reference，组件被调用时会新建一个该组件的实例，而refs就会指向这个实例，它可以是一个回调函数，这个回调函数会在组件被挂载后立即执行。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/105572.html
摘要：学习之道简体中文版通往实战大师之旅掌握最简单，且最实用的教程。前言学习之道这本书使用路线图中的精华部分用于传授，并将其融入一个独具吸引力的真实世界的具体代码实现。完美展现了的优雅。膜拜的学习之道是必读的一本书。 《React 学习之道》The Road to learn React (简体中文版) 通往 React 实战大师之旅：掌握 React 最简单，且最实用的教程。 showIm...
摘要：是用户建立客户端应用的前端架构，它通过利用一个单向的数据流补充了的组合视图组件，这更是一种模式而非正式框架，你能够无需许多新代码情况下立即开始使用。结构和数据流一个单向数据流是模式的核心。 Flux是Facebook用户建立客户端Web应用的前端架构，它通过利用一个单向的数据流补充了React的组合视图组件，这更是一种模式而非正式框架，你能够无需许多新代码情况下立即开始使用Flux。 ...
摘要：前言以深入学习技术栈为线索，记录下学习的重要知识内容。要传入时，必须使用属性表达式。如果要使用自定义属性，要使用前缀这与标准是一致的。 前言 以《深入学习react技术栈》为线索，记录下学习React的重要知识内容。本系列文章没有涵盖全部的react知识内容，只是记录下了学习之路上的重要知识点，一方面是自己的总结，同时拿出来和在学习react的人们一块分享，共同进步。 正文 一：rea...
摘要：用于规范的类型与必需的状态。表示由组件更改的数据，通常是通过与用户的交互来更改的。为了实现的修改，需要注册事件处理程序到相应的元素上。当事件发生时，将更新后的值是从中检索，并通知组件。通常情况下，该函数初始化状态使用，，或其他数据存储。 前言 上一篇文章中，我们讲到了JSX的一些用法和注意事项，这次我们来讲react中最基础也是特别重要的内容：组件。这篇文章包含组件的以下内容：状态、属...
摘要：根据的类型不同，分别实例化类。并且处理特殊属性，比如事件绑定。之后根据差异对象操作元素位置变动，删除，添加等。各个组件独立管理层层嵌套，互不影响，内部实现的渲染功能。根据基本元素的值，判断是否递归更新子节点，还是删除旧节点，添加新节点。 首先理解ReactElement和ReactClass的概念。想要更好的利用react的虚拟DOM，diff算法的优势，我们需要正确的优化、组织rea...
阅读 3057·2023-04-26 00:40
阅读 2394·2021-09-27 13:47
阅读 4211·2021-09-07 10:22
阅读 2968·2021-09-06 15:02
阅读 3309·2021-09-04 16:45
阅读 2488·2021-08-11 10:23
阅读 3600·2021-07-26 23:38
阅读 2902·2019-08-30 15:54
