自学React 入门
刚开始学习React, 读了官网和别人的一些博客，总结了一部分内容，记录一下。有错误欢迎指正。。。
1. 组件分类
React中有两种类型的组件，一种是”方法组件“，一种是”类组件“;
(1). 区别
方法组件:
不具有state状态；只用于展示数据，不做逻辑处理；
不具有render()方法，直接返回JSX对象或null对象；
示例：
function Welcome(props) {
return (
// 此处注释的写法
<div className="shopping-list">
{/* 此处 注释的写法 必须要{}包裹 */}
<h1>Shopping List for {props.name}</h1>
<ul>
<li>Instagram</li>
<li>WhatsApp</li>
</ul>
</div>
)
}
ReactDOM.render(
<Welcome name="jack" />,
document.getElementById('app')
)
类组件
具有state状态；有业务逻辑，需要操作数据(state);
必须有render()方法；render()方法返回的对象必须有根元素且只能有一个，可以为JSX对象或null对象；
需要在构造方法中使用super(props)才可在组件的后续内容中使用this;
示例：
class ShoppingList extends React.Component {
constructor(props) {
super(props)
}
// class创建的组件中 必须有render方法 且显示return一个react对象或者null
render() {
return (
<div className="shopping-list">
<h1>Shopping List for {this.props.name}</h1>
<ul>
<li>Instagram</li>
<li>WhatsApp</li>
</ul>
</div>
)
}
}
(2). 相同点
- 定义的名称首字母均大写；（React通过此来判断是否为一个组件）
- 返回值最好都用()包含；
- 返回值为JSX对象或null对象；
- 都接受父组件传递的props对象属性，且子组件不可修改；
2. 数据对象: props和state
(1). props
- 用于存储父组件传递给子组件的参数；React会将传递的参数转换为对象赋值给props;
- 只读属性；子组件接收父组件的props参数，子组件不可修改；
- 实例化：①. 从父组件传递过来，在子组件中通过super(props)实例化；②. 通过组件类的静态属性defaultProps来初始化props；(组件名.defaultProps = {color: 'red'}????
(2). state
- 用于给组件内部提供数据，检测组件自身数据的变化；（因为不能修改props属性，所有需要state来记录组件自身变化）
- 只有类组件才具有状态
- 初始化位置: 构造方法中
- 作用域：组件内
- 不可在render()方法中修改state对象的值，会造成死循环；
- 不可在state对象中定义render()方法中不需要的数据，影响渲染性能；
3. 类组件部分内容介绍
(1). super() 方法
super()方法用于访问父组件的构造方法；如继承中 类1 extends 类2 {};;此时类1若想访问类2的构造方法，就需要使用super()方法；
类组件中super(props)作用
- 类组件中，继承了ReactComponent类。 在构造方法中，使用super(params)方法，用来调用父组件ReactComponent类的构造方法来实例化props属性；
- 在子类的构造方法中必须先调用super()才可以在super()之后的语句中使用this; 若无super(),则this为null; 因为使用Function或Class创建的组件，组件方法内的this是null的，若想让this指向本组件，需要手动绑定，解决办法:①. 构造方法中使用super(props); ②. bind绑定；③。 箭头函数绑定；
(2). render() 方法
- render()方法用于渲染组件DOM,创建DOM树；当props传入或state对象更新时，React会重新调用render()方法，对比更改前和更改后的DOM, 更新DOM树；
- key值使用: 数组上下文元素应该指定key值，因为部分情况会导致React更新整颗树；key值只需要保持与其他兄弟节点唯一即可，不需要全局唯一；React会根据key值来比较原树和新树，进行选择性更新；
(3).defaultProps 和 propTypes静态属性
- defaultProps 用于组件内部定义props对象
- propTypes 用于约束props对象内的属性类型；
(4). 条件判断使用
- {条件 && 条件符合执行}
- {条件 ? (符合执行) : (不符合执行)}
4. 组件生命周期
(1). 创建/实例化组件 - constructor(){}
- 获取props, 类组件实例化Props;
- 类组件初始化state;
(2). 挂载 - componentWillMount(){}
- 发生于render()之前
- 获取不到DOM对象
- 改变State属性不会重新渲染组件
(3). 渲染 - render(){}
- 获取不到DOM对象
- 不能修改state值，会造成递归渲染
(4).挂载完成 - componentDidMount(){}
- 可获取DOM对象 - document.getElementById(...);
- 可修改state值
- 可发送请求数据
二、React自带的组件介绍
1. Provider组件
组件之外使用Provider包裹，作用是将store放入context对象中，使子孙组件可以获取到store的值；
2. Helmet组件
管理对文档头的修改，采用纯HTML标记并输出纯HTML标记；