React开发进阶之JSX语法和React组件的生命周期

HTML5 herman 3073浏览 0评论
公告:“业余草”微信公众号提供免费CSDN下载服务(只下Java资源),关注业余草微信公众号,添加作者微信:xttblog,发送下载链接帮助你免费下载!
本博客日IP超过1800,PV 2600 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog,之前的微信号好友位已满,备注:返现
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序
视频教程免费领

所有天上飞的理念,都需要陆地上实现。随着React火了之后,React现在已成了前端开发的必学框架了。而且React的实现思想还是那么的独特,对我们实现高性能的前端开发可以打下坚实的基础。她对DOM操作的虚拟DOM(virtual-dom)机制,是未来前端发展的一大方向!

React开发实战

React框架使用非常简单,我们只需在Web页面中引用react.js和JSXTransformer.js这两个js文件就可以快速开始了。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="build/react.js"></script>
    <script src="build/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
  </head>
  <body>
    <div id="xttblog"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>www.xttblog.com</h1>,
        document.getElementById('xttblog')
      );
    </script>
  </body>
</html>

看了demo可能大家感觉奇怪的是<script type="text/babel">,这里为什么变了呢?这是为了把JSX转成标准的JavaScript,我们就用了<script type="text/babel">标签,然后通过Babel转换成在浏览器中真正执行的内容。同样的我们可能还会见到<script type="text/jsx">标签,这是因为React独有的JSX语法,跟JavaScript不兼容。React提供两个库:react.js和JSXTransformer.js ,它们必须首先加载。在实际的生成过程中JSXTransformer.js是在服务器端先完成的。

react并不依赖jQuery,当然我们可以使用jQuery,但是render里面第二个参数必须使用JavaScript原生的getElementByID方法,不能使用jQuery来选取DOM节点。

Jsx语法

通过上面的demo,我们发现HTML语言直接写在JavaScript语言之中,不加任何引号,这就是JSX的语法,它允许HTML与JavaScript的混写,了解过AngularJs的朋友也会发现React同样的使用{x}结构来操作变量。

React组件属性

ReactJS是基于组件化的开发,React允许将代码封装成组件(component),然后像插入普通HTML标签一样,在网页中插入这个组件。React.createClass方法就用于生成一个组件类。

var Xttblog = React.createClass({
	render:function(){
		return <h1>www.xttblog.com {test}</h1>;
	}
});
React.render(
	<Xttblog test="业余草" />,
	document.getElementById('container')
);

根据上面的代码我们顺便总结下React组件:

1)获取属性的值用的是this.props.属性名
2)创建的组件名称首字母必须大写。
3)为元素添加css的class时,要用className。
4)组件的style属性的设置方式也值得注意,要写成style={{width: this.state.witdh}}。

React组件状态

组件免不了要与用户互动,React的一大创新就是将组件看成是一个状态机。一开始有一个初始状态,然后用户互动,导致状态变化,从而触发重新渲染UI。组件状态的开发我们一般要用到getInitialState函数,这个函数在组件初始化的时候执行,必需返回NULL或者一个对象。关于组件状态的使用一般体现在UI的启用、禁用,显示、隐藏等方面。

React组件的生命周期

组件的生命周期分成三个状态:
Mounting已插入真实 DOM
Updating正在被重新渲染
Unmounting已移出真实 DOM
React 为每个状态都提供了两种处理函数,will 函数在进入状态之前调用,did 函数在进入状态之后调用,三种状态共计五种处理函数。
componentWillMount()
componentDidMount()
componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)
componentWillUnmount()

此外,React 还提供两种特殊状态的处理函数。
componentWillReceiveProps(object nextProps):已加载组件收到新的参数时调用
shouldComponentUpdate(object nextProps, object nextState):组件判断是否重新渲染时调用

版权声明:本文为博主原创文章,未经博主允许不得转载。

业余草公众号

最后,欢迎关注我的个人微信公众号:业余草(yyucao)!可加QQ1群:135430763(2000人群已满),QQ2群:454796847(已满),QQ3群:187424846(已满)。QQ群进群密码:xttblog,想加微信群的朋友,之前的微信号好友已满,请加博主新的微信号:xttblog,备注:“xttblog”,添加博主微信拉你进群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作可添加助理微信进行沟通!

本文原文出处:业余草: » React开发进阶之JSX语法和React组件的生命周期