1、简述props和state的作用和应用场景?(难易指数:☆)
React的数据流:由父节点传递到子节点(由外到内传递),如果顶层组件某个prop改变了,React会向下传递,重新渲染所有使用过该属性的组件。
除此之外React 组件“内部”还具有自己的“状态”,这些状态只能在组件内部修改。通过与用户的交互(点击事件),实现不同状态(显示、隐藏、数量增加...),然后渲染UI,让用户界面和数据保持一致。
React中只需更新组件的state,然后根据新的 state 重新渲染用户界面。
this.props 属性:由外部世界传入到组件内部,只读,不可修改。
this.state 状态:由组件自己创建,记录内部变化,可以修改,一般由用户交互产生新的状态(数据)。
总结
1、 状态的初始化,在constructor中使用this.state方法来定义初始化状态
2、 如果要修改状态,必须使用this.setState({newState:newValue})
React组件显示的变化,都是通过状态的修改,自动(重写)渲染到页面中。
state 和 props 主要的区别在于 props 是不可变的,而 state 可以根据与用户交互来改变。
这就是为什么有些容器组件需要定义 state 来更新和修改数据。而组件只能通过 props 来传递数据。
state属于内部状态维护。
props属于外部传入(定义)。
2、简述PropsType的作用,并举2个常见例子。(难易指数:☆)
React组件创建的时候,需要传入属性,我们可以使用使用PropTypes进行类型检查,您可以使用React.PropTypes在组件的道具上运行。
React.PropTypes
自 React v15.5以来,它已经进入了一个不同的包--”prop-types
”.
安装
yarn add prop-types -D
使用
import PropTypes from 'prop-types';
PropTypes.array //检测数组类型
PropTypes.bool //检测布尔类型
PropTypes.func //检测函数类型
PropTypes.number //数字
PropTypes.object //对象
PropTypes.string //字符串
PropTypes.symbol //symbol
PropTypes.instanceOf() //继承自XXX
PropTypes.oneOf([‘值1’,’值2’]) //任意一个值
PropTypes.oneOfType([ PropTypes.array, PropType.bool ... ]) //数组内任意一种类型
默认情况下,验证器将props视为可选属性。
class LifeCycle extends React.Component{
static propTypes = { // 定义默认参数
name:PropTypes.string
}
}
3、简述组件的生命周期及对应作用(难易指数:☆☆)
React生命周期可以分成三个阶段:
1、挂载阶段:对象创建到完全渲染(实例化)
2、运行阶段:组件状态的改变(最长阶段)
3、卸载阶段:组件使用完毕后,或者不需要存在与页面中,那么将组件移除,执行销毁。
生命周期(三个阶段)
1. 挂载阶段(组件初始化及第一次渲染)
生命周期钩子函数
constructor: 状态初始化
componentWillMount: 通知函数,状态初始化完毕,可以开始渲染(在REACT 17.0会被废弃)
render: 渲染函数,进行组件渲染
componentDidMount: 通知函数,初始化渲染完毕,可以发送初始化ajax请求数据
2. 运行阶段(所有函数调用次数>=0)
componentWillReceiveProps: 自定义属性发生变化
shouldComponentUpdate: 是否允许组件渲染(true允许,false阻止)
componentWillUpdate:通知函数:组件将要更新
render: 渲染函数
componentDidUpdate: 通知函数:组件更新渲染完毕
3. 销毁阶段
componentWillUnmount: 卸载前的最后一次通知(资源回收!!!)
3个最重要的钩子
constructor 定义状态
componentDidMount 初始化ajax数据
componentWillUnmount 卸载组件,回收资源(例如定时器)
//卸载函数(性能优化挂钩的函数!!)
//资源回收及释放(例:定时器之类就在此函数内进行回收!!!!!!)
4、简述在生命周期中的哪一步你应该发起 AJAX 请求,为什么(难易指数:☆☆)
componentDidMount: 通知函数,初始化渲染完毕,可以发送初始化ajax请求数据
5、简述受控组件和不受控组件的区别(难易指数:☆☆)
this.props 属性:由外部世界传入到组件内部,只读,不可修改。
this.state 状态:由组件自己创建,记录内部变化,可以修改,一般由用户交互产生新的状态(数据)。