美文网首页H5之旅前端学术
6个钩子,2个状态,一个套路学习React.js

6个钩子,2个状态,一个套路学习React.js

作者: 聆听者JYZ | 来源:发表于2016-11-21 14:15 被阅读102次

React.js开发的几个学习重点, 6个钩子(和ios的生命周期基本一样),2个状态,一个套路学习React.js,一起来看看吧.

常用的6个钩子看生命周期

React 为组件的不同生命阶段,提供了近十个钩子方法。

componentWillMount():组件加载前调用

componentDidMount():组件加载后调用

componentWillUpdate(): 组件更新前调用

componentDidUpdate(): 组件更新后调用

componentWillUnmount():组件卸载前调用

componentWillReceiveProps():组件接受新的参数时调用

注意:Ajax 请求一般在componentDidMount方法里面发出。

常用的两个状态,初始化和传参:

两个状态:组件可以从外部传入参数,内部使用this.props获取参数

组件往往会有内部状态,使用this.state表示。

钩子方法:getDefaultProps(和ios中ViewDidLoad一样,可以在这初始化状态)

常用的一个套路创建虚拟DOM节点:

ReactDOM虚拟DOM的套路,虽有的组件都可以用ReactDOM虚拟一个DOM节点,在html中可以直接在Div中获取此节点直接渲染。

构建虚拟DOM(此时Login是组件的类名,login就只虚拟的节点名) 在html中可以直接加载渲染虚拟DOM

相关文章

  • 6个钩子,2个状态,一个套路学习React.js

    React.js开发的几个学习重点, 6个钩子(和ios的生命周期基本一样),2个状态,一个套路学习React.j...

  • react.js学习(一)

    react.js学习(一) react本质上是一个状态机,可以帮助开发者管理复杂的随时间变化的状态。它以一个精简的...

  • 钩子表达法

    钩子表达法可以看作是前面万能演讲套路中讲三点的补充, 之所以叫「钩子」,用一个钩子支撑话题,钩住你想表达的内容,不...

  • React 函数式组件 hooks

    常用钩子函数 状态钩子: useState0 React自带的一个hoOk函数,声明组件状态参数可以设置 stat...

  • Web前端开发与设计

    学习 React.js 比你想象的要简单 原文地址:Learning React.js is easier tha...

  • 软件架构-01 mvc到flux

    学习mvc到Flux框架我们先了解 flux 背景:React.js和Angular.js对比:React.js ...

  • JNA User32 Api使用参考

    常用的user32API说明JNA改变窗口状态和键盘钩子键盘钩子

  • vue-router的next()方法

    1、next():进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是confirmed(确认的)。2、...

  • React 的 context

    React.js 的 context 就是这么一个东西,某个组件只要往自己的 context 里面放了某些状态,这...

  • react.js 学习

    react.js 学习 Every component is required to have a render...

网友评论

    本文标题:6个钩子,2个状态,一个套路学习React.js

    本文链接:https://www.haomeiwen.com/subject/ucjupttx.html