网站建设资讯

NEWS

网站建设资讯

react组件特点与生命周期

●react组件的特点:

创新互联建站坚持“要么做到,要么别承诺”的工作理念,服务领域包括:成都网站建设、成都做网站、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的二连浩特网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!

1、为了避免代码冗余,提高代码利用率,组件可以重复调用
2、组件的属性props是只读的,调用者可以传递参数到props对象中定义属性,调用者可以直接将属性作为组件内的<>中的属性或方法直接调用。往往是组件调用方调用组件时指定props定义属性,往往定值后就不改边了,注意组件调用方可赋值被调用方。
3、 props传递是父子组件交互的唯一方式,通过传递一个新的props属性值使得子组件重新re-render,从而达到父子组件通讯。
{...this.props}可以传递属性集合,...为属性扩展符
4、组件有函数组件,也有类组件写法(es6开始)
5、组件必须返回一个单独的根元素
6、组件中state为私有属性,是可变的,一般在construct()中定义,使用方法:不要直接修改 state(状态),支持异步更新,state(状态)更新会被合并
7、修改子组件还有一种方式,通过 ref属性,表示为对组件真正实例引用,其实就是ReactDOM.render()返回的组件实例

●react创建组件的三种方法:
(1)react 16版本之前(16开始移除了createClass这个方法,所以一定要注意react库版本的导入),React.createClass创建组件:

var HelloWorld=React.createClass({
render:function(){
return

hello world!{this.props.name}


}
})

(2)函数组件:

function HelloWorld(props){
return

hello world!{props.name}


}

(3)ES6 的 class定义一个组件:

class HelloWorld extends React.Component{
render(){
return

hello world!{this.props.name}

 };

}

react组件特点与生命周期

学习react一定要了解组件生命周期,对写高性能组件有很大帮助。
react组件生命周期有三个阶段:
1、第一个阶段为mounted阶段,react components被render解析生成对应DOM节点并被插入浏览器DOM结构的一个过程

2、第二阶段为update,一个mounted的react components被重新render的过程。重新渲染的过程并不是说DOM一定会发生改变,只有当前逐渐state发生改变且影响当前DOM结构时,才会改变react对应的DOM结构。

3、第三个阶段,一个mounted的react components对应的DOM节点被从浏览器DOM中移除的过程。

4、每个状态react都封装了对应的hook函数。对特定的系统事件hook后,一旦发生指定的hook事件,对该事件已hook的程序会受到系统的通知,程序会对该事件第一时间做出响应。


当前标题:react组件特点与生命周期
链接地址:http://cdweb.net/article/jeiogp.html