React之学习记录

2018-12-07 admin

一、项目搭建

注意事项:node>=6 and npm>=5.2


1、npx create-react-app hello-world
2、cd hello-world
3、npm start

二、components与props:

注意事项:1、props属性为只读属性。2、修改双向绑定值,需引入state或lifecycle


import React,{Component} from 'react';
import ReactDOM from 'react-dom';

1、方式一:

注意事项:修改Welcome实例内容,需要重复创建Welcome实例,如setInterval(function(){React.Component(<Welcome name={new Date()} />,RootDOM) },1000)


function Welcome(props){
    return (<div>展示数据:{props.name}</div>)
}

2、方式二:


class Welcome extends Component{
    constructor(props){
        super(props)
    }
    render(){
        return (
            <div>
                <span>展示数据{this.props.name}</span>
                <span>展示数据2</span>
            </div>
        )
    }
}

ReactDOM.render(<Welcome name="wqqq" />, document.getElementById('root'));

三、state与lifecycle:

解析:1、this.state在constructor中注入。2、state中的值通过this.setState({propertyName:propertyValue}),进行修改。3、此处用React的lifecycle中有:componentDidMount、componentWillUnmount。

class Clock extends React.Component{
    constructor(props){
        super(props)
        this.state={date:new Date()}
    }
    tick(){
        this.setState({
            date:new Date()
        })
    }
    componentDidMount(){
        this.timerID=setInterval(()=>this.tick(),1000)
    }
    componentWillUnmount(){
        clearInterval(this.timerID)
    }
    render(){
        return (
            <div>this is {this.state.date.toLocaleTimeString()}.</div>
        )
    }
}
ReactDOM.render(<Clock />,document.getElementById('root'));

原文链接:https://segmentfault.com/a/1190000017279147

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-47517.html

文章标题:React之学习记录

相关文章
jQuery中DOM树操作之复制元素的方法
本文实例讲述了jQuery中DOM树操作之复制元素的方法。分享给大家供大家参考。具体分析如下: 复制元素 前面提到的操作包括:插人新创建的元素、将元素从文档中的一个位置移动 到另一个位置,以及通过新元素来包装已有的元素。可是,有时候也会用到...
2015-11-13
Node.js的不足之处
跨平台编程能力不够强大 Bowery团队指出Go能很方便地在不同系统里进行程序编译,这是他们转入Go的重要原因之一。 作为开发平台,对Linux,Windows,OSX等常见操作系统提供支援是能否吸引开发者的基本要素。在Go中,开发者可以针...
2015-11-12
JavaScript正则进阶之路——活学妙用奇淫正则表达式
有些童鞋肯定有所疑惑,花了大量时间学习正则表达式,却发现没有用武之地,正则不就是验证个邮箱嘛,其他地方基本用不上,其实,大部分人都是这种感觉,所以有些人干脆不学,觉得又难又没多大用处。殊不知,想要成为编程大牛,正则表达式必须玩转,GitH...
2017-05-31
ajax教程之ajax使用Http请求
ajax中是如何让使用http请求的呢? 在传统的JS编程中,如果您希望从服务器上的文件或数据库中得到任何的信息,或者向服务器发送信息的话,就必须利用一个 HTML 表单向服务器 GET 或 POST 数据。而用户则需要单击“提交”按钮来发...
2015-11-12
DOM之通俗易懂讲解
DOM 是所有前端开发每天打交道的东西,但是随着 jQuery 等库的出现,大大简化了 DOM 操作,导致大家慢慢的 “遗忘” 了它的本来面貌。不过,要想深入学习前端知识,对 DOM 的了解是不可或缺的,所以本文力图系统的讲解下 DOM 的...
2016-01-13
JS教程之基础
javascript教程之什么是 JavaScript? JavaScript 被设计用来向 HTML 页面添加交互行为。JavaScript 是一种脚本语言(脚本语言是一种轻量级的编程语言)。JavaScript 由数行可执行计算机代码组...
2015-11-12
Ajax教程之Ajax介绍
Ajax 由 HTML、JavaScript™ 技术、DHTML 和 DOM 组成,这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序。本文的作者是一位 Ajax 专家,他演示了这些技术如何协同工作 —— 从总体概述...
2015-11-12
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
1.bootstrap-table 单击单行选中 $(&#x27;#gzrwTable&#x27;).on(&#x27;click-row.bs.table&#x27;, function(e, row, $element) { $(&#x...
2017-02-17
[翻译]基于Webpack4使用懒加载分离打包React代码
原文地址:https://engineering.innovid.com/code-splitting-using-lazy-loading-with-react-redux-typescript-and-webpack-4-3ec601...
2018-03-11
数据格式之战:JSON vs XML
在比较JSON和XML之前,我们先来上一堂关于数据格式的简要历史(更准确的说,是关于XML的始祖): 早在1970年,IBM开发了一种叫Generalized Markup Language的标记语言,简称GML,它主要是为脚本语言定义的一...
2016-01-13
回到顶部