1 / 18
文档名称:

react 入门基础教程.ppt

格式:ppt   大小:380KB   页数:18页
下载后只包含 1 个 PPT 格式的文档,没有任何的图纸或源代码,查看文件列表

如果您已付费下载过本站文档,您可以点这里二次下载

分享

预览

react 入门基础教程.ppt

上传人:相惜 2020/10/7 文件大小:380 KB

下载得到文件列表

react 入门基础教程.ppt

文档介绍

文档介绍:React概览React的核心思想是:封装组件,各个组件维护自己的状态和UI,当状态变更,自动重新渲染整个组件。 基于这种方式的一个直观感受就是我们不再需要不厌其烦地来回查找某个DOM元素,然后操作DOM去更改UI。React大体包含下面这些概念: :npminstall–:.JSXJSX简单来说就是为了把HTML模板直接嵌入到JS代码里面,这样就做到了模板和组件关联,但是JS不支持这种包含HTML的语法,所以需要通过工具将JSX编译输出成JS代码才能使用。.组件React组件两个核心概念props就是组件的属性,由外部通过JSX属性传入设置完成。state是组件的当前状态,可以把组件简单看成一个“状态机”,根据状态state呈现不同的UI展示。一旦状态(数据)更改,组件就会自动调用render重新渲染UI;,并且提供一个render方法以及其他可选的生命周期函数、组件相关的事件或方法定义。组件分为三个阶段:实例化、运行时及销会&清理期首次使用一个组件时,以下这些方法依次被调用:(实例化)ponentDidMount当状态改变,以下这些方法依次被调用:(ponentDidUpdate销毁,ponentWillUnmount方法将会被调用。(销毁).组件生命周期之实例化getDefaultProps对于组件,这个方法只会被调用一次,对于父组件指定的props属性,默认设置为该组件的props值。getInitialState这个方法只会调用有次,ponentWillMount只会调用一次,在render(渲染)之前调用,这也是在render方法调用前修改组件state的最后一次机会renderrender方法是必须的。ponentDidMount在render方法成功调用并且真实的DOM已渲染后,()来获取相应DOM节点。.ponentWillReceiveProps组件在接收到新的props时候调用,在初始化渲染时不会调用;ponentUpdate在接收到新的props或state时在渲染之前调用,如果该方法返回false,则render()ponentDidUpdate在渲染成功后将被调用,和componentDidMount方法类似。.组件生命周期之销毁&ponentWillUnmount在组件从DOM中移除的时候被调用;ponentDidMount执行了setInterval()方法,ponentWillUnmount方法来clearInterval().