react: 组件初识 && 生命周期 && 相关说明

jokester 发布于2019-08-20 16:35 / 2101人阅读

react组件

参考：https://facebook.github.io/re...

react的组件是其核心思想部分，react允许将整个ui设计分割称为独立的、可复用的隔离模块，react的组件是一个抽象的类，直接使用reacy.component是没有很大意义的，所以一般使用的方法就是定义一个 class 来继承这个component，并且需要实现方法 render（）；就像下面一样：

      class Greeting extends React.Component {
          render() {
            return Hello, {this.props.name};
          }
      }

如果不想使用es6的class，也可以使用react提供的react.createClass({}),就像如下：

var Hello = React.createClass({
    render: function() {
        return Hello Taobao, Hello UED;
    }
});

对于定义好的组件，就可以直接使用了，react在使用html标准标签和react组件标签时是通过首字母来进行区别的，大写首字母就是自定义组件，无论是自定义组件还是html标准标签，处理的方式是一样的，使用React.createElemment来进行过组件的引用：

React.createElement(
  type,
  [props],
  [...children]
)

这也是说明在jsx中无法书写 if for之类的语句，且可以使用js表达式的原因了。可以看看：http://reactjs.cn/react/tips/...

// This JSX:
Hello World!

// Is transformed to this JS:
React.createElement("div", {id: if (condition) { "msg" }}, "Hello World!");

ReactDOM.render(Hello World!
, mountNode);

react生命周期

参考：https://facebook.github.io/re...
https://segmentfault.com/a/11...

mounting （实例化阶段）这个阶段的方法都是在组件被实例化、插入DOM中的过程中被顺序调用的

getDefaultProps、getInitialState或者 constructor(props)

【前两者es5写法，都是配合create-react-class可以设置初始 props、state的内容，】

var createReactClass = require("create-react-class");
var Greeting = createReactClass({
getDefaultProps: function() {
  return {
    name: "Mary"
   };
 },
getInitialState: function() {
  return {count: this.props.initialCount};
},
 // ...

});

【后者使用es6写法，通过使用class就可以完成上面的操作，比较的简单】

class Greeting extends React.Component {
constructor(props) {
  super(props);
  this.state = {count: props.initialCount};
}
 // ...
}

Greeting.defaultProps = {
  name: "Mary"
  };

在实例化之前counstructor会被调用，首先需要执行的是 super（props），这句需要在构造函数的最前面，这里也是最适合初始化state的地方，如果这个组件不需要state、也不需要绑定任何方法，可以不调用constructor函数，

componentWillMount()

在实例化时最开始执行，在这里同步的修改state不会引起重新的渲染，在这里需要注意的是，官网有这样一段话： This is the only lifecycle hook called on server rendering. Generally, we recommend using the constructor() instead. 我的理解是服务端渲染的实例化阶段只会执行componentWillMount这一个钩子，不过参考的文章：https://segmentfault.com/a/1190000004168886#articleHeader3  有这样的描述，这里具体就不太清楚了： ![图片描述][1]

render() 补充部分有说明

componentDidMount()

官网说了，这个是在实例化完成立刻调用的函数，所以如果需要异步请求的话这里是最好的选择，然后更新state，从而进行重新渲染。

updating （更新期）在组件的props、state发生变化需要重新渲染时调用这个阶段的函数

componentWillReceiveProps(nextProps)

 在实例化完成以后，如果有新的props将接受了，可以在这里处理props的对比，可能props没有改变也会触发这个钩子函数，可能输父级元素的重新渲染，只在更新期才会触发，当然在更新期修改state并不会触发

shouldComponentUpdate()

在更新期接受到了props和state后，这里可以对比props和state，从而分析是否需要进行重新的渲染，这个函数在forceUpdate（）来进行强制刷新时不会被调用，这个函数会返回布尔值，当返回false时，后面的willupdate、render、didupdate都不会执行，不过这并不会影响改组件的子元素的渲染，当子元素的props或者state有变化时还是会重新渲染。

componentWillUpdate(nextProps, nextState)

 这里最好不要做stestate的事情，setstate可以在componentWillReceiveProps时使用，如果shouldComponentUpdate返回false则不会调用了。

render()

componentDidUpdate()

 这里是进行DOM操作的最佳时机，也是发起异步请求数据的好时机

unmounting （销毁期）当组件需要从DOM中移除时，或者页面切换时需要调用

componentWillUnmount()

 这里可以用来消除创建的定时器、dom元素、异步请求等资源

补充

render（）函数在实例化和更新时都会被调用，除了在更新时起发生了componentWillUnmount()返回false这种情况，render执行时会检测props、state和是否只返回来了一个人顶级元素，也可以使用返回null或者false这样的，会被忽略渲染，render函数最好也是纯函数，

setState(updater, [callback])，这是一个异步操作，所以这并不会立刻改变satte的值，甚至会等上好几次的修改来合并进行，

forceUpdate，进行强制渲染，一般而言最好是不用，使用的话将不会调用更新阶段的shouldComponentUpdate()钩子函数，

GPU云服务器云服务器 asp &amp&amp逻辑 js 2&amp&amp1 attr&039&039checked&039&039 OneTechCloud&amp

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83019.html

react：组件初识 &amp;&amp; 生命周期 &amp;&amp; tips

react组件参考：https://facebook.github.io/re... react的组件是其核心思想部分，react允许将整个ui设计分割称为独立的、可复用的隔离模块，react的组件是一个抽象的类，直接使用reacy.component是没有很大意义的，所以一般使用的方法就是定义一个 class 来继承这个component，并且需要实现方法 render（）；就像下面一样： ...

miqt 2019-08-20 16:35 评论0 收藏0
如何用ahooks控制时机的hook？

　　本篇主要和大家沟通关于ahooks ，我们可以理解为加深对 React hooks 的了解。　　我们先说下关于抽象自定义 hooks。构建属于自己的 React hooks 工具库。　　其实我们应该培养阅读学习源码的习惯，工具库是一个对源码阅读不错的选择。　　注：本系列对 ahooks 的源码解析是基于v3.3.13。　　现在就进入主题用ahooks 来封装 React要注意的时机？　　Fun...

3403771864 2022-11-05 16:52 评论0 收藏0
React 学习之路（四） state &amp; 生命周期

摘要：如果需要交互，应该在生命周期中进行交互。生命周期过程中涉及三个主要的动作术语表示正在挂接虚拟到真实。每当组件第一次加载到中的时候，我们都想生成定时器，表示正在被重新渲染。组件是真正隔离的每一个都会建立自己的定时器，并独立的更新。 state & 生命周期 state 我们之前实现的时钟，实现方式是每个一秒进行一次渲染dom，但是这种方法并不合理。我们想要通过一种状态来控制组件，实现更优...

罗志环 2019-08-26 12:16 评论0 收藏0
解读useEvent显著降低Hooks负担的原生Hook

　　想要做到就要有更多的学习，你知道为什么React不把他们设为默认方法#useEvent是一个刚刚提案的原生Hook，还处于RFC。现在我们就一起来讨论下　　RFC：Request for Comments 提案应用的还十分广泛　　我们先看看在没有 useEvent 会出现的情况：　　functionChat(){ 　　const[text,setText]=useState(''...

3403771864 2022-10-22 22:44 评论0 收藏0
前端每周清单第 29 期：Web 现状分析与优化策略、Vue 单元测试、Headless Chrom

摘要：前端每周清单第期现状分析与优化策略单元测试爬虫作者王下邀月熊编辑徐川前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点分为新闻热点开发教程工程实践深度阅读开源项目巅峰人生等栏目。 showImg(https://segmentfault.com/img/remote/1460000011008022); 前端每周清单第 29 期：Web 现状分析与优化策略...

HackerShell 2019-08-21 12:05 评论0 收藏0