React技术栈——ReactJS

Lin_YT 发布于2019-08-19 18:41 / 1637人阅读

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

初始化

引入三个script:

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

ReactDOM.render

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

ReactDOM.render(
    Test,
    document.body
);

组件

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

var Hello = React.createClass({
    render: function(){
        return Hello ,{this.props.name}
    }
})

ReactDOM.render(
    ,
    document.body
)

this.props.children

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

var NotesList = React.createClass({
    render: function(){
        return (
            
            {
                React.children.map(this.props.children, function(child){
                    return {child}
                })
            }
            
        );
    }
});

ReactDOM.render(
    
        Hello
        world
    ,
    document.body
);

PropTypes

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

var Title = React.createClass({
    propTypes: {
        title: React.propTypes.string.isRequired,
    },
    render: function(){
        return {this.props.title}
    }
});

获取真实DOM节点

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

var Component = React.createClass({
    handleClick: function(){
        this.refs.myTextInput.focus();
    },
    render: function(){
        return (
            
                
                
            
        )
    }
})

ReactDOM.render(
    ,
    document.body
)

this.state

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

var LikeButton = React.createClass({
    getInitialState: function(){
        return {liked: false};
    },
    handleClick: funtion(event){
        this.setState({liked: !this.state.liked});
    },
    render: function(){
        var text = this.state.liked ? "like" : "dont like";
        return(
            
            
            
        )
    }
})

ReactDOM.render(
    ,
    document.body        
)

组件的生命周期

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

Mounting: 已插入真实DOM
Updating: 正在被重新渲染
Unmounting: 已移出真实DOM

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

componentWillMount()
componentDidMount()

componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object preState)

componentWillUnount()

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

componentWillReceiveProps(object nextProps): 已加载组件收到新的参数时调用
shouldComponentUpdate(object nextProps, object nextState): 组件判断是否重新渲染时调用

Demo:

var Hello = React.createClass({
    getInitialState: function(){
        return {
            opacity: 1.0
        }
    },
    
    componentDidMount: function(){
        this.timer = setInterval(function(){
            var opacity = this.state.opacity;
            opacity += 0.05;
            if(opacity < 0.1){
                opacity = 1.0;
            }
            this.setState({
                opacity: opacity
            })
        }.bind(this), 100)
    },
    
    render: function(){
        return (
            
                Hello {this.props.name}
            
        )
    }
});

ReactDOM.render(
    ,
    document.body
)

云服务器 GPU云服务器技术栈全栈技术 js技术栈 reactjs

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

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

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

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

khlbat 2019-08-23 15:05 评论0 收藏0
ReactJS新闻 #21 React Native中更好的列表视图

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

FingerLiu 2019-08-20 15:24 评论0 收藏0
用 ReactJs 创建Mac版的 keep

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

Tychio 2019-08-20 14:27 评论0 收藏0
React 、 ES6 - 介绍（第一部分）

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

pingink 2019-08-20 17:59 评论0 收藏0