一.React 生命周期
• 参考网址:https://www.jianshu.com/p/eac35ef92e4c
• 第一次执行
a. 处理属性(获取默认值和校验传递属性的类型)
b. 处理状态(执行constructor获取初始的状态信息)
c. componentWillMount第一次组件渲染之前
ⅰ. 从服务器获取数据(把获取的数据重新赋 值给状态或者存放到Redux)
d. render:第一次或者重新进行视图的渲染
e. componentDidMount:第一次渲染完成
ⅰ. 此处可以获取到DOM元素了
• 更新状态
f. shouldComponentUpdate是否应该更新组件(组件的性能优化)
ⅰ. 当我们执行setState等操作,首先触发的是当前钩子函数
ⅱ. this.state当前的状态(改之前的状态),nextState即将要修改的状态信息,this.props和nextProps同理
ⅲ. 钩子函数返回true代表允许重新渲染视图,反之false则停止继续渲染视图
ⅳ. shouldComponent这个钩子函数,根据钩子函数返回true或者是false决定状态是否重新渲染组件(无论返回啥,状态本身值都已经修改了)
ⅴ. forceUpdate强制更新(重新渲染),不会执行shouldComponentUpdate这个钩子函数
g. componentWillUpdate更新数据之前
h. render执行
i. componentDidUpdate更新数据之后
• 更新属性
j. componentWillReceiveProps当父组件重新渲染,子组件也会重新渲染,首先触发此钩子函数
k. 更新状态流程执行
• 卸载
l. componentWillUnmount即将卸载组件之前一般在这个方法中 清除定时器和绑定的事件
二.React的组件
• 每一个组件都是一个单独的个体(数据私有、有自己完整的生命周期)
• 创建react组件有三种方式
• 函数式组件
• 基于React.Component类创建组件
• REACT HOOKS
• react支持单闭合标签组件调用(vue不支持)
• 调取组件的时候,可以单闭合也可以双闭合,双闭合好处:可以在标签继续设置子元素(类似于vue中的solt),调取组件的时候会把子元素(JSX对象)基于props.children传递给组件
• 组件的名字首字母必须大写,为了和内置的组件区分开
• 组件每使用一次,当前的组件函数都会执行一次
• 如果需要传入一个对象,那么需要对对象进行...展开,然后放入行间属性
• 删除组件 ReactDOM.unmountComponentAtNode(window.root);
2.1 函数式组件
只要让函数返回一个JSX元素就是函数式组件
特点:简单(开发简单,渲染也快),但是一旦组件被调用,里面的内容渲染完成,当前组件中的信息基本上就不变了(除非:重新调用组件传递不同的属性信息)=>‘静态组件’:没有state状态管控内容随时变化,也没有生命周期函数等
函数式组件不能像类组件一样,基于prop-types给属性设置默认的规则
• props是函数组件的参数(props只可读,不可改),可以用来接收通过行内属性传递过来的属性,其中有个children属性为标签内写的内容,React.Children属性还有几个方法可以处理多个children的渲染
• React.Children.map:遍历传进来的jsx对象(子元素 props.children)
• React.Children.count(props.children):返回数组(props.children)的长度
2.2 类组件
当ReactDOM.render渲染的时候,如果发现虚拟dom中type是一个类组件,创建这个类的实例,并且把解析出来的props传递给这个类:new Clock(props) =>先执行constructor(此时props并未挂载到实例上,基于this.props不能获取到值,但是可以直接使用形参中的peops;解决方法:super(props)这样在constructor中也可以用this.props)=>当constructor执行完,React会帮我们继续处理:把props/context挂载到实例上(后期在其他的钩子函数中可以基于this.props获取传递的属性值),React帮我们把render方法执行
2.3 给传递的属性设置规则(prop-types)
• 官方网址:https://zh-hans.reactjs.org/docs/typechecking-with-proptypes.html#gatsby-focus-wrapper
• 基于第三方插件prop-types设置属性的规则:默认值和其他规则
• $ yarn add prop-types
• 设置默认值
• static defaultProps={xxx:xxx}
• 其他设置
• static propTypes={xxx:PropTypes.stying}
• PropsTypes.isRequired必须传递
• PropTypes.string/bool/number/func/object/symbol/node(元素对象)/element(JSX元素)/instanceOf(xxx)必须是某个类的实例/oneOf(['News','Photos'])多个中的一个/oneOfType([PropTypes.string,PropTypes.number,PropTypes.instanceOf(Message)])多个类型中的一个
• 和vue一样,我们设定的规则不会阻碍内容的渲染,不符合规则的在控制台报错
2.4 React的状态管理
数据管控(model)
属性 props
状态 state(私有状态,redux公共状态管理)
属性什么时候能改:设置默认值、让父组件重新调取子组件传递不同的属性、把获取的属性赋值给组件的状态,后期修改状态也可以
setState
每一次修改状态应该基于:setState方法(相对于this.state.xxx=xxx来说,不仅更改了状态,还会通知视图重新渲染)
this.state.time='哈哈哈'; //这样可以修改状态信息,但是不会通知组件重新渲染
this.forceUpdate(); //强制渲染视图
setState有两个参数,第一个参数传入一个对象(里面是要修改的值),第二个参数传入一个函数(这个函数在渲染视图完后才能后执行)
class Counter extends Component {
constructor ( ) {
super ( ) ;
this . state = { count: 0 }
} ;
handleClick = ( ) => {
this . setState ( { count: this . state. count+ 1 } , function ( ) {
this . setState ( { count: this . state. count+ 1 } ) ;
} ) ;
} ;
render ( ) {
console. log ( 'render' ) ;
return (
< p>
{ this . state. count}
< button onClick= { this . handleClick} > + < / button>
< / p>
)
}
}
ReactDOM. render ( < Counter/ > , window. root) ;
2.5 受控组件和非受控组件
基于状态(或者属性)的更新来驱动视图渲染的组件叫做受控组件(受状态管控的组件)
非受控组件:不受状态管控的组件
2.6 组件之间信息传递
1.(父组件)向(子组件)传递信息
主要是通过 prop进行传值
2.(父组件)向更深层的(子组件) 进行传递信息 >>利用(context)
利用(context)
3.(子组件)向(父组件)传递信息
依赖 props 来传递事件的引用,并通过回调的方式来实现的。
4.没有任何嵌套关系的组件之间传值(比如:兄弟组件之间传值)
引入一个PubSubJS 库,通过这个库你可以订阅的信息,发布消息以及消息退订。
5.利用react-redux进行组件之间的状态信息共享
利用react-redux实现数据 方法 共享