资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/React技术栈——ReactJS

React技术栈——ReactJS

Lin_YT / 1684人阅读

摘要：将模板语言转为语言，并插入组件组件类第一个字母必须大写对象属性与组件属性一一对应。是例外，它表示组件的所有节点组件的属性可以接受任意值。需要一种验证机制，验证别人使用组件时提供的参数是否合法获取真实节点组件的是。

初始化

引入三个script:

</>复制代码 
  2.   
  3.   
  4.

第一个是React的核心代码，第二react-dom.js是React里面操作DOM的部分，第三个browser.js将JSX转为Javascript语法。

ReactDOM.render

将模板语言转为HTML语言，并插入DOM

</>复制代码 
  1. ReactDOM.render(
  2.     
    Test
    ,
  3.     document.body
  4. );
组件

组件类第一个字母必须大写

</>复制代码 
  1. var Hello = React.createClass({
  2.     render: function(){
  3.         return 
    Hello ,{this.props.name}
  4.     }
  5. })
  6. ReactDOM.render(
  7.     ,
  8.     document.body
  9. )
this.props.children

this.props对象属性与组件属性一一对应。this.props.children是例外，它表示组件的所有节点

</>复制代码 
  1. var NotesList = React.createClass({
  2.     render: function(){
  3.         return (
  4.             
    1.             {
    2.                 React.children.map(this.props.children, function(child){
    3.                     return 
    4. {child}
    5.                 })
    6.             }
    7.             
  5.         );
  6.     }
  7. });
  8. ReactDOM.render(
  9.     
  10.         Hello
  11.         world
  12.     ,
  13.     document.body
  14. );
PropTypes

组件的属性可以接受任意值。需要一种验证机制，验证别人使用组件时提供的参数是否合法

</>复制代码 
  1. var Title = React.createClass({
  2.     propTypes: {
  3.         title: React.propTypes.string.isRequired,
  4.     },
  5.     render: function(){
  6.         return 
    {this.props.title}
  7.     }
  8. });
获取真实DOM节点

组件的是virtual DOM。需要获取真实DOM节点时，要用到ref属性

</>复制代码 
  1. var Component = React.createClass({
  2.     handleClick: function(){
  3.         this.refs.myTextInput.focus();
  4.     },
  5.     render: function(){
  6.         return (
  7.             
  8.                 
  9.                 
  10.             
  11.         )
  12.     }
  13. })
  14. ReactDOM.render(
  15.     ,
  16.     document.body
  17. )
this.state

React的状态机，状态的变化可以出发重新渲染UI

</>复制代码 
  1. var LikeButton = React.createClass({
  2.     getInitialState: function(){
  3.         return {liked: false};
  4.     },
  5.     handleClick: funtion(event){
  6.         this.setState({liked: !this.state.liked});
  7.     },
  8.     render: function(){
  9.         var text = this.state.liked ? "like" : "dont like";
  10.         return(
  11.             
  12.             
  13.             
  14.         )
  15.     }
  16. })
  17. ReactDOM.render(
  18.     ,
  19.     document.body        
  20. )
组件的生命周期

组件的生命周期有三个状态:

</>复制代码 
  1. Mounting: 已插入真实DOM
  2. Updating: 正在被重新渲染
  3. Unmounting: 已移出真实DOM

React为每个状态提供两种处理函数，will在进入状态前调用，did函数在进入状态后调用，共五中处理函数:

</>复制代码 
  1. componentWillMount()
  2. componentDidMount()
  3. componentWillUpdate(object nextProps, object nextState)
  4. componentDidUpdate(object prevProps, object preState)
  5. componentWillUnount()

还有两种特殊状态的处理函数：

</>复制代码 
  1. componentWillReceiveProps(object nextProps): 已加载组件收到新的参数时调用
  2. shouldComponentUpdate(object nextProps, object nextState): 组件判断是否重新渲染时调用

Demo:

</>复制代码 
  1. var Hello = React.createClass({
  2.     getInitialState: function(){
  3.         return {
  4.             opacity: 1.0
  5.         }
  6.     },
  7.     
  8.     componentDidMount: function(){
  9.         this.timer = setInterval(function(){
  10.             var opacity = this.state.opacity;
  11.             opacity += 0.05;
  12.             if(opacity < 0.1){
  13.                 opacity = 1.0;
  14.             }
  15.             this.setState({
  16.                 opacity: opacity
  17.             })
  18.         }.bind(this), 100)
  19.     },
  20.     
  21.     render: function(){
  22.         return (
  23.             
  24.                 Hello {this.props.name}
  25.             
  26.         )
  27.     }
  28. });
  29. ReactDOM.render(
  30.     ,
  31.     document.body
  32. )
GPU云服务器 云服务器 技术栈 全栈技术 js技术栈 reactjs

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

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

相关文章

  • 使用webpack + electron + reactJs开发windows桌面应用

    摘要：在开发项目时，可以先用网页的形式开发项目，等到网页项目部分差不多完成后，再注入中，开发网页项目部分和窗体部分的交互在中使用后，将不会打包有关的代码 electron是一两年前挺火的一个框架本质上是一个浏览器，但是集成了很多windows系统的功能，让前端开发也可以直接操作windows的窗体，做成一个实打实的桌面软件 团队主要的技术栈是react，所以考虑用react开发，方便维护。 ...

    khlbat 评论0 收藏0

  • ReactJS新闻 #21 React Native中更好的列表视图

    摘要：新闻第期新闻中更好的列表视图官方博客近日发表了新的列表组件的消息，三月份的候选版本的中，加入了三种新的与组件，可以针对不同情况需求而使用，这三个新组件的数据来源，都可以对外部的数据流框架或进行搭配使用。目前中的类似功能仍然在草案中。 ReactJS新闻 第021期 (2017.03.26) 新闻 React Native中更好的List Views(列表视图) React Naive...

    FingerLiu 评论0 收藏0

  • 用 ReactJs 创建Mac版的 keep

    摘要：我们专注移动体育领域的应用开发，倡导开放共享的精神，不模仿，不跟风，只做酷的产品。这就是正在做的事情，我们希望通过科技驱动，让更多的人热爱健身，喜欢运动。 序 因为自己不大喜欢喜欢用手机，所以当在手机上看到有些应用只能在手机上使用时觉得好别扭，但我本身也不是写移动App的，只是会写点 js，都说js啥都能干，那我就用它干！ 关于 Keep Keep 是一个热爱运动的年轻团队，同时也是一...

    Tychio 评论0 收藏0

  • React 、 ES6 - 介绍（第一部分）

    摘要：下一步我们将结果输出到文件。这是我们用编写的第一个非常简单的组建。使用将创建的组建导出以便在其它地方能够正常导入使用。 这是React和ECMAScript6结合使用系列文章的第一篇。 本文出自从零到壹全栈部落 下面是所有系列文章章节的链接： React 、 ES6 - 介绍（第一部分） React类、ES7属性初始化（第二部分） React类，方法绑定（第三部分） ES6中Reac...

    pingink 评论0 收藏0

发表评论

登陆后可评论

0条评论

Lin_YT

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<