2021-01-14

React核心知识点

React中的三个属性

state、props、refs

React的组件：函数组件(无状态)、类组件（有状态）

JSX:

概念： 复合XML规范的JavaScript拓展语法
本质： JSX 不是之间渲染成DOM，而是先转为cereateElement，再渲染
注释： {/* */}
特殊关键字： className代替class，htmlFor代替label标签中的for
语法规则：要使用声明式编码

函数组件和类组件的区别：

有无this 、有无生命周期、有无state

生命周期函数

1. 加载期：constructor, componentWillMount ,render, componentDidMount
2. 更新期：componentWillReceiveProps, shouldComponentUpdate,componentWillUpdate,render,componentDidUpdate
3. 卸载期：componentWillUnmount

React中this指向的解决方案

1. 在事件中使用箭头函数
2. 在事件中使用bind(this)为函数绑定this对象；

props和state属性的区别：

1. props不能被修改、state可以修改
2. props的值是由外界传递的、state是组件内私有数据
3. 是由setState()修改state数据

React如何自定义组件

1. 自定义组件的属性 props.xxx
2. 自定义组件的事件 props.xxx()
3. 自定义组件事件函数的默认参数值 props.xxx(params)
4. 组件内声明子节点 props.children

组件通信(封装组件)：

1. 父传子：父组件中为子组件标签声明属性，在子组件中通过this.props.params的方式获取
2. 子传父：父组件中为组件标签声明事件，在子组件内的相对时机事件函数内调用this.props.onxxx(params)
3. 兄弟传值：先子传父，再父传子