学习来源:React中文网址
React
react是React库的入口。加载React的方式如下:
- 通过<script>标签加载;
- ES6中:import React from ‘react’;
- ES5中:var React = require(‘react’);
React.Component //React组件的基类,抽象基类;
React.PureComponent //与React.Component几乎相同;但是在进行shouldComponentUpdate判断时,仅仅会对props和state做浅对比;
React.Children //提供了处理 this.props.children 这个不透明数据结构的工具
React.Fragment // 可以在render方法里面返回多个元素,而不用增加多余的DOM元素
React.forwardRef //这个要好好了解一下ref是个啥东西
createElement()
cloneElement()
createFactory()
isValidElement()
React.ForwardRef;
React.Component
这是一个抽象基础类。一般来说会继承该类,并至少实现一个render方法。
组件生命周期相关的方法,参见React知识体系
- constructor // 构造函数,初始化状态使用;可以根据props初始化state;若要state随着props更新有两个办法:状态提升 或者 getDerivedStateFromProps
- render // 纯函数,一般返回一个元素,可以通过一个数组返回多个元素
- componentWillMount // render之前
- componentDidMount
- componentWillReceiveProps
- shouldComponentUpdate
- componentWillUpdate
- componentDidUpdate
- componentWillUnmount
- componentDidCatch
- getDerivedStateFromProps
其他方法
- setState // 用于响应事件处理和服务端响应的更新用户界面的主要方式;参数可以是函数或者对象
- forceUpdate
类属性
- defaultProps // 被定义为组件类的一个属性,用以为类设置默认的属性。这对于未定义(undefined)的属性来说有用,而对于设为空(null)的属性并没用
- displayName // 被用在调试信息中。JSX会自动设置该值
实例属性
- state // 该组件的特定数据,其可能改变多次。状态由用户定义,且其应为纯JavaScript对象。state是要在render中使用的,若不在render中使用,则不应该将其放到state上,而是直接放到实例上
- props 包含了该组件调用者定义的属性;this.props.children是一个特别属性,其通常由JSX表达式中的子标签定义,而不是标签本身
ReactDOM
- 通过<script>标签加载;
- ES6中:import ReactDOM from ‘react-dom’;
- ES5中:var ReactDOM = require(‘react-dom’);
react-dom这个包提供了针对DOM的方法。可以在应用的顶级域中使用,也可以在有需要的情况下用作跳出React模型的出口。
大部分组件应该都不需要react-dom包,一般仅仅在index.js中会用到render来渲染根节点。
- render // 渲染一个React元素,添加到位于提供的container里的DOM元素中,并返回这个组件的一个 引用 (或者对于无状态组件返回null)
- unmountComponentAtModel // 从DOM元素中移除已挂载的React组件,清除它的事件处理器和state
- findDOMNode // 如果这个组件已经被挂载到DOM中,函数会返回对应的浏览器中生成的DOM元素
ReactDOMServer
- 通过<script>标签加载;
- ES6中:import ReactDOMServer from ‘react-dom/server’;
- ES5中:var ReactDOMServer = require(‘react-dom/server’);
这个类用来做服务端渲染。
- renderToString // 把一个React元素渲染为原始的HTML
- renderToStaticMarkup // 类似 renderToString,但是不会创建额外的DOM属性