react入门_react 入门实例教程 - CSDN
  • react 之零基础入门

    2019-07-11 10:13:20
    付出,不一定会有收获;不付出,却一定不会有收获,...import React from "react" import {Component) from 'react' class Comp1 extends Component{ constructor(..args){ super(..args) } render(){ ...

    付出,不一定会有收获;不付出,却一定不会有收获,不要奢望出现奇迹

    react 组件写法非常简单

    import React from "react"
    import {Component) from 'react'
    
    class Comp1 extends Component{
    	
    		constructor(..args){
    			super(..args)
    		}
    
    		render(){
    			return(
    				<div></div>
    			);
    		}
    }
    
    export default Comp1;
    

     以上就是jsx 写法,顾名思义就是js + xml ,

    其中render 方法返回值,就是jsx 写法,我的理解就是写html 无非, class 变成className for 变成htmlFor 本质没啥不通

    感觉就是在写js ,写多了,也就会了!

    ————————————————————————————————

    组件的引用也非常简单,

    引入使用,就行了

     

    比我们的vue 少了一部,就是注册,vue中还要在component 中注册!

     

    ————————————————————————————————————————————

     

     

    以上都不重要,都是细节小知识点,随便找个教程都能很轻松的学会,这也是现在社会的好处,资源到处都有,就像我一样

    基本上啥都有,所以各位看客,需要任何虚拟资料都可以加我qq 1981389505 去免费获取所要的资料,

    因为我有一套爬虫系统支撑,不扯了,我们继续

    ————————————————————————————————————————————

    下面是 ,两个重点,就是  redux (全局 的状态管理) ---

    react于VUE类比
    功能 react vue
    状态管理  redux vuex
    路由 react-router-dom vue-router

     

    我们无论去使用那个组件技术,上面的 状态管理和路由都必须拿下,要不然,你基础都不会也跑不起来嘛

    所以不要着急,我们一点点前行!

     

    下面就是redux使用!

    我们先画一个整体的流程图:

     

    上面是我用画图软件画的,是有点Low,凑合看吧!

     

    
    
    import {createStore} from 'redux';
    
    
    // 处理请求的回调方法,我感觉很开心,因为一次性就把redux 的写法写正确了,可见我的js 水平很高
    function reducer1(state,action){
    	if(!state){
    		state = {
    			name:'xiaoming',
    			age:28
    		}
    	}
    
    	const type = action.type;
    	switch(type){
    		case "show":
    		return {
    			...state,
    			name:action.param
    		}
    		break;
    	}
    	return state;
    }
    
    const store = createStore(reducer1);
    
    export default store;

     

     

    import React from 'react';
    import ReactDOM from 'react-dom';
    
    import App from './App';
    
    import store from './store'
    import {Provider} from "react-redux"
    
    ReactDOM.render(<Provider store={store}><App /></Provider>, document.getElementById('root'));
    

     

    以上两文件,第一个文件,定义的就是全局的状态管理器

    第一个文件包含了,全局的状态管理函数!

     

    全局数据放state 中, 对数据的操作,都交给 上面的switch 中去处理!

    第二个文件主要时<Provider/> 谁被它包裹,谁就拥有了连接全局资源的权利,谁就用于了数据,和对数据处理函数!

     

    App.js

    导出的时候,这么写就行

    数据都在state 中了,

    对数据的处理函数,你可以自己写,上面的show 方法就是一个action

    调用

    最终会到了reducer 函数中

    根据action 的类型处理对应的逻辑!

    好,大概就是组件连接全局状态器

     

    发送action ,一个大JSON就是一个action ,然后reducer 函数,根据action。类型去处理对应的数据!

     

    redux 就略讲到这里,没基础的肯定看不懂这篇,只有看视频了!

    建议去看:

    http://www.itjiaocheng.com/youzhi/25805.html

    看第六期就行了,里面讲的很清楚!(标注不是做广告)

    因为我所学的都是从石川那里学的,很清晰!

    这篇先写到这里,下一个就是react 的路由,我觉得有必要去搞清楚

    基本写法, 嵌套写法,接受参数??

    我们放到下一篇

    再次一个格言: 

    每个人都会累,没人能为你承担所有悲伤,人总有一段时间要学会自己长大

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    展开全文
  • React 入门附带demo

    2018-09-12 10:44:40
    DEMO 1 - 最简单的react渲染 代码: &lt;html&gt; &lt;head&gt; &lt;link href="css/bootstrap.min.css" rel="stylesheet"&gt; &lt;/head&gt; &lt...

    DEMO 1 - 最简单的react渲染

    代码:

    <html>
        <head>
            <link href="css/bootstrap.min.css" rel="stylesheet">
        </head>
    
        <body>
            <h1><span class="label label-info">DEMO 1</span></h1>
            <br><br><br>
    
    
            <div class="well" id="well">
    
            </div>
    
            <script src="js/jquery.min.js"></script>
            <script src="js/react.js"></script>
            <script src="js/react-dom.js"></script>
            <script src="js/browser.min.js"></script>
    
            <script type="text/babel">
            var Text = React.createClass({
                render: function() {
                    return (
                        <div className="a">
                            大家好,我是用react渲染出来的!
                        </div>
                    );
                }
            });
    
            ReactDOM.render(
                <Text/>,
                document.getElementById('well')
            );
            </script>
        </body>
    </html>
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37

    在浏览器中显示的效果如下

    这里写图片描述

    讲解:

    • 页面中,只有<div id='well'>这里的内容是使用react渲染出来的,代码中这里是空的,依赖下面的js进行渲染
    • 首先看下 vat Text = 这块,这里是声明一个模块,名字随意起,我们把第一个字母大写,用来区分html中原生的标签
    React.createClass({
        render: function() {
            return (
                <div className="a">
                    大家好,我是用react渲染出来的!
                </div>
            );
        }
    });
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    这块是创建一个模块,使用React.createClass即可创建。 
    * 其中参数有很多,但都可以省略,唯有render不可以省略,因为这是用来表述这个插件被加载后,显示的是什么样子,它的返回结果,就是加载在页面上最终的样式。

    ReactDOM.render(
       <Text/>,
        document.getElementById('well')
    );
    • 1
    • 2
    • 3
    • 4

    这段代码是用来渲染react组件额,第一个参数是组件,第二个参数是要渲染的位置。 
    * 使用<Text/>的 方式就可以实例化组件,或者写成<Text></Text>,要注意下,react中标签的闭合非常严格,任何标签的关闭与打开必须一一对应,否则会报错。 
    * 到目前为止,就完成了一次渲染,将Text组件render函数返回的内容,填充到了id=well的div中。


    DEMO 2 - 带有参数的react

    往往在使用中,文本的内容并不是写死的,而是需要被我们指定,这样组件才能更通用。下面介绍下,如何向react中传递参数。

    代码:

    <html>
        <head>
            <link href="css/bootstrap.min.css" rel="stylesheet">
        </head>
    
        <body>
            <h1><span class="label label-info">DEMO 2</span></h1>
            <br><br><br>
    
    
            <div class="well" id="well">
    
            </div>
    
            <script src="js/jquery.min.js"></script>
            <script src="js/react.js"></script>
            <script src="js/react-dom.js"></script>
            <script src="js/browser.min.js"></script>
    
            <script type="text/babel">
            var Text = React.createClass({
                render: function() {
                    return (
                        <div className="a">
                            大家好,我是用{this.props.name}渲染出来的!age={this.props.age}
                        </div>
                    );
                }
            });
    
            ReactDOM.render(
                <Text name="react" age={181}></Text>,
                document.getElementById('well')
            );
    
            </script>
        </body>
    </html>
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38

    在浏览器中显示的效果如下

    这里写图片描述

    讲解

    • 首先,这个大体上跟第一个demo类似,唯有实例化Text时,多了参数。
    • 当我们传递参数时,写了两种方式,一种是 name="react"另一种是age={181},这两种写法是有区别的,并不仅仅因为一个是str,一个是int。如果是str这种类型,写成 name="xxx"或者name={"xxx"}都是可以的,加了{}的意思就是js中的变量,更加精确了。而后者age={181}是不可以去掉{}的,这样会引起异常,所以这里要注意下,并且建议任何类型都加上{}来确保统一。
    • 当在Text初始化时添加了参数,在组件内部,都收集在this.props中,使用时只要{this.props.name}既可以获取name对应的值,如果取得key并不存在,这里不会报错,只是取到的值是空的。当然可以在getDefaultProps中定义默认的props值,即使在没有传递参数的情况下,也能取到默认值。
    • props中的参数,在初始化传递后,便不能再修改。

    DEMO 3 - state,react的核心

    state算是react的核心了,任何页面的变化,刷新都是state的变化引起。在react中,只要调用了setState都会引起render的重新执行。下面介绍下如何通过键盘事件触发状态变化。

    代码:

    <html>
        <head>
            <link href="css/bootstrap.min.css" rel="stylesheet">
        </head>
    
        <body>
            <h1><span class="label label-info">DEMO 3</span></h1>
            <br><br><br>
    
    
            <div class="well" id="well">
    
            </div>
    
            <script src="js/jquery.min.js"></script>
            <script src="js/react.js"></script>
            <script src="js/react-dom.js"></script>
            <script src="js/browser.min.js"></script>
    
            <script type="text/babel">
            var Text = React.createClass({
                getInitialState: function() {
                    return {name: "react"};
                },
                keyUp: function(e){
                    this.setState({name: e.target.value});
                    console.log(this.state.name);
                },
                render: function() {
                    return (
                        <div className="a">
                            大家好,我是用{this.state.name}渲染出来的!
                            <input onKeyUp={this.keyUp} />
                        </div>
                    );
                }
            });
    
            ReactDOM.render(
                <Text></Text>,
                document.getElementById('well')
            );
    
            </script>
        </body>
    </html>
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46

    在浏览器中显示的效果如下

    这里写图片描述

    讲解:

    • 这次组件中多了两个函数,getInitialStatekeyUp,其中getInitialState是react中的初始化状态的函数,类似上一节中getDefaultProps的作用。keyUp是我自定义的函数,用来响应键盘事件的。
    • 我们先看render函数,文字渲染中加了{this.state.name},这个是react内部的状态,可以理解是存储数据的k-v结构,这里的v支持的对象较多。{this.state.name}就是引用状态中的name属性,与props的区别在于,如果state中不存在这个属性,是会报错的,所以我们要在getInitialState中初始化这个状态的初始值。
    • render中还多了一个,onKeyUp是注册键盘键弹起的事件,当按键按下后弹起,就会触发onKeyUp事件,然后通过绑定的this.keyUp,将事件传递给了自己定义的keyUp函数中。
    • keyUp函数中,使用了this.setState({name: e.target.value}),setState是react中内部的函数,专门用来更新状态的,这里是讲状态中name的值变更为引起事件的value值。
    • 在react中,每次状态的变化,都会引起render函数的重新渲染,这是它自己的机制,我们无需人为处理,当键盘输入内容时,会触发状态变化,导致render重新渲染,渲染的过程会从state中取出变量,所以我们就看到了页面的内容发生了变化。
    • 我们在setState下面加了一个console,通过控制台可以发现,每次打印的值并不是当前输入的值,而是上一次输入的值,这是怎么回事呢?在setState中,这是一个异步处理的函数,并不是同步的,console在setState后立刻执行了,所以这时候状态还没有真正变更完,所以这里取到的状态仍旧是更新前的。这里要特殊注意下。如果需要在更新状态后,再执行操作怎么办呢,setState还有第二个参数,接受一个callback,我们尝试将keyUp中代码改成这样
    this.setState({name: e.target.value}, function(){
        console.log(this.state.name);
    })
    • 1
    • 2
    • 3
    • 这时候log打印出来的只就是我们期望的内容,当每次状态更新成功后,都会调用传进去的callback函数。
    • react中渲染dom有自己的优化方式,首先它在内存中构建一套虚拟的dom,每次更新前将虚拟dom与浏览器中dom对比,只讲有变化的部分进行更新,这样大大的提高了性能。或者我们可以重写函数来控制是否刷新,当然这种方式我们并不提倡。

    DEMO 4 - 网络请求触发状态变化

    上一节讲到状态变化触发render的重新渲染,这里将常用的网络请求引入,结合到状态变化中。

    代码:

    <html>
        <head>
            <link href="css/bootstrap.min.css" rel="stylesheet">
            <style>
                .div {
                    height: 100px;
                }
            </style>
        </head>
    
        <body>
            <h1><span class="label label-info">DEMO 4</span></h1>
            <br><br><br>
    
    
            <div class="well div" id="well">
    
            </div>
    
            <script src="js/jquery.min.js"></script>
            <script src="js/react.js"></script>
            <script src="js/react-dom.js"></script>
            <script src="js/browser.min.js"></script>
    
            <script type="text/babel">
            var Text = React.createClass({
                getInitialState: function() {
                    return {cur_time: 0};
                },
                request: function() {
                    $.ajax({
                        type: "GET",
                        url: "http://xxx",
                        success: function(data){
                            this.setState({cur_time: data.timestamp});
                        }.bind(this),
                        complete: function(){
                            this.setState({cur_time: Date.parse(new Date()) / 1000});
                        }.bind(this)
                    });
                },
                componentDidMount: function(){
                    setInterval(this.request, 1000);
                },
                render: function() {
                    return (
                        <div className="col-xs-12">
                            当前时间{this.state.cur_time}
                            <div className={ this.state.cur_time % 2 == 0?"hidden": "col-xs-6 alert alert-success"}>
                                <span>最后一位奇数</span>
                            </div>
                            <div className={ this.state.cur_time % 2 != 0?"hidden": "col-xs-6 alert alert-danger"}>
                                <span>最后一位偶数</span>
                            </div>
                        </div>
                    );
                }
            });
    
            ReactDOM.render(
                <Text></Text>,
                document.getElementById('well')
            );
    
            </script>
        </body>
    </html>
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67

    在浏览器中显示的效果如下

    这里写图片描述
    这里写图片描述

    讲解:

    • 这个例子中,页面每秒会请求一次网络,将请求到的数据中时间戳更新到状态中。但是这个例子中实际上并没有使用服务返回的时间戳,因为我在公司使用测试网的接口拿数据,但是开放给大家要换一个公网能拿到时间戳的api,简单的找了下没找到,也不想用公司的接口试,所以算是mock了下~,在complete中每次都取浏览器时间来更新。
    • 仍旧是先看代码,相比于上一个例子,这里多了两个函数requestcomponentDidMount,其中request是请求网络的函数,componentDidMount是react内部的函数,也是react生命周期的一部分,它会在render第一次渲染前执行,而且只会执行一次。
    • 先看request,一个普通的ajax请求,在success回调中,假设服务器返回的json为{“timestamp”: 1467425645},那data.timestamp就取得是1467425645,然后将值赋给state中的cur_time属性。这时状态发生了变化,render函数会重新渲染。当然例子中success不会被访问到,因为那个url根本不存在,所以我在complete回调中来写了一个状态变化,模拟success成功。
    • 为什么success回调函数最后会加一个bind(this)?因为这个函数已经不是react内部的函数了,它是一个外部函数,它里面的this并不是react组件中的this,所以要将外部函数绑定到react中,并能使用react内部的方法,例如setState,就要在函数最后bind(this),这样就完成了绑定。
    • 再看下componentDidMount函数,这个函数在render渲染前会执行,里面的代码也很简单,增加了一个定时器,1秒钟执行一次request。
    • 这里应该在加一个回调,就是定时器在初始化时创建,却没有对应的销毁,所以在组件销毁的时候,应该在这个生命周期中销毁定时器。

    DEMO 5 - 组件的嵌套使用

    在封装react时,我们往往按照最小单位封装,例如封装一个通用的div,一个通用的span,或者一个通用的table等,所以各自组件对应的方法都会随着组件封装起来,例如div有自己的方法可以更改背景色,span可以有自己的方法更改字体大小,或者table有自己的方法来更新table的内容等~ 这里我们用一个div相互嵌套的例子来查看父子组件如何相互嵌套及调用各自的方法。在下面的例子中,父组件与子组件都有一个方法,来改变自身的背景色,我们实现父子组件相互调用对方的方法,来改变对方的背景色。

    代码:

    <html>
        <head>
            <link href="css/bootstrap.min.css" rel="stylesheet">
            <style>
                .child {
                    border-color: black;
                    border: 1px solid;
                    height: 200px;
                }
                .parent {
                    height: 400px;
                    border: 3px solid;
                }
            </style>
        </head>
    
        <body>
            <h1><span class="label label-info">DEMO 5</span></h1>
            <br><br><br>
    
    
            <div id="well">
    
            </div>
    
            <script src="js/jquery.min.js"></script>
            <script src="js/react.js"></script>
            <script src="js/react-dom.js"></script>
            <script src="js/browser.min.js"></script>
    
            <script type="text/babel">
            var Child = React.createClass({
                getInitialState: function() {
                    return {color: ""};
                },
                changeColor: function(e) {
                    this.setState({color: e.target.getAttribute("data-color")});
                },
                render: function() {
                    return (
                        <div style={{backgroundColor: this.state.color}} className="col-xs-5 col-xs-offset-1 child">
                            <br/>
                            <ul className="list-inline">
                                <li><a href="#" data-color="#286090" className="btn btn-primary" onClick={this.props.parentChangeColor}>&nbsp;</a></li>
                                <li><a href="#" data-color="#31b0d5" className="btn btn-info" onClick={this.props.parentChangeColor}>&nbsp;</a></li>
                                <li><a href="#" data-color="#c9302c" className="btn btn-danger" onClick={this.props.parentChangeColor}>&nbsp;</a></li>
                                <li><a href="#" data-color="#ec971f" className="btn btn-warning" onClick={this.props.parentChangeColor}>&nbsp;</a></li>
                                <li><a href="#" data-color="#e6e6e6" className="btn btn-default" onClick={this.props.parentChangeColor}>&nbsp;</a></li>
                            </ul>
                        </div>
                    );
                }
            });
    
            var Parent = React.createClass({
                getInitialState: function() {
                    return {color: ""};
                },
                changeColor: function(e) {
                    this.setState({color: e.target.getAttribute("data-color")});
                },
                child1ChangeColor: function(e) {
                    this.refs["child1"].changeColor(e);
                },
                child2ChangeColor: function(e) {
                    this.refs["child2"].changeColor(e);
                },
                render: function() {
                    return (
                        <div style={{backgroundColor: this.state.color}} className="col-xs-10 col-xs-offset-1 parent">
                            <br/>
                            <ul className="list-inline">
                                <li>对应第一个child</li>
                                <li><a href="#" data-color="#286090" className="btn btn-primary" onClick={this.child1ChangeColor}>&nbsp;</a></li>
                                <li><a href="#" data-color="#31b0d5" className="btn btn-info" onClick={this.child1ChangeColor}>&nbsp;</a></li>
                                <li><a href="#" data-color="#c9302c" className="btn btn-danger" onClick={this.child1ChangeColor}>&nbsp;</a></li>
                                <li><a href="#" data-color="#ec971f" className="btn btn-warning" onClick={this.child1ChangeColor}>&nbsp;</a></li>
                                <li><a href="#" data-color="#e6e6e6" className="btn btn-default" onClick={this.child1ChangeColor}>&nbsp;</a></li>
                            </ul>
                            <ul className="list-inline">
                                <li>对应第二个child</li>
                                <li><a href="#" data-color="#286090" className="btn btn-primary" onClick={this.child2ChangeColor}>&nbsp;</a></li>
                                <li><a href="#" data-color="#31b0d5" className="btn btn-info" onClick={this.child2ChangeColor}>&nbsp;</a></li>
                                <li><a href="#" data-color="#c9302c" className="btn btn-danger" onClick={this.child2ChangeColor}>&nbsp;</a></li>
                                <li><a href="#" data-color="#ec971f" className="btn btn-warning" onClick={this.child2ChangeColor}>&nbsp;</a></li>
                                <li><a href="#" data-color="#e6e6e6" className="btn btn-default" onClick={this.child2ChangeColor}>&nbsp;</a></li>
                            </ul>
                            <hr/>
    
                            <Child ref="child1" parentChangeColor={this.changeColor} />
                            <Child ref="child2" parentChangeColor={this.changeColor} />
                        </div>
                    );
                }
            });
    
    
            ReactDOM.render(
                <Parent/>,
                document.getElementById('well')
            );
    
            </script>
        </body>
    </html>
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105

    在浏览器中显示的效果如下

    这里写图片描述

    讲解:

    • 首先说下,刚打开页面并不是这样的,背景都是白色的。这里的截图是点击各个按钮后变色的样子。
    • 在这个例子中,蓝色的div是一个父组件,它里面包含了两个子组件,分别是红色和橙色,这两个子组件实际上是一模一样的。我们先看下父组件如何调用子组件。
    • 代码中,子组件里面定义了changeColor函数,用来接收onClick事件,并将点击的按钮的data-color属性值作为色值,更改到state中的color属性中,然后触发render来更新背景色。在父组件调用子组件时,我们写了,里面的ref=”child1”就是react中提供的一个属性标签,它与普通的props不同,这里写上ref=”xxx”后,在父组件中,使用this.refs[“child1”]就可以引用对应的子组件,当然这里的ref的值是可以随意定义,只要不重复就好。这样就可以实现组组件引用子组件,然后直接调用里面的方法就好,例如child1ChangeColor中就有this.refs["child1"].changeColor(e);的使用。连起来说下逻辑,在点击父组件中第一列中的按钮后,触发onClick事件,然后onClick事件后,传递到child1ChangeColor后,将事件传递进入,然后再次传递给子组件的changeColor中,因为子组件的changeColor是更改子组件自身的state,所以这时候子组件再次渲染,于是改变了颜色。这就是父组件调用子组件的逻辑。
    • 再说下子组件何如调用父组件的方法,父组件自身也有一个changeColor函数,用来改变自身的背景色。当父组件调用子组件时,,通过props,也就是第二个例子中讲的那样,通过参数的方式传递给子组件,这样子组件中就可以使用this.props.parentChangeColor,来把子组件的onClick事件传递给父组件的changeColor方法中,来改变父组件的背景色。这就是子组件调用父组件函数的方法。
    • 还有一种情况,就是一个父组件下有多个子组件,但是子组件中并没有直接的关系,这时候如果一个子组件调用另一个子组件的方法,就得通过他们共同的父组件来作为中转,在父组件中增加函数来作为中转的函数,来实现子组件间的调用。
    展开全文
  • React入门/初学者

    2020-04-10 13:29:55
    React React是一个用于用户界面地JAVASCRIPT库 React主要用于构建UI,很多人认为React是MVC中地V视图 React起源于Facebook的内部项目,用来架设Ins谈gram的网站,并于2013年开源 React拥有较高的性能,代码逻辑...

    React

    React是一个用于用户界面地JAVASCRIPT库

    React主要用于构建UI,很多人认为React是MVC中地V视图

    React起源于Facebook的内部项目,用来架设Ins谈gram的网站,并于2013年开源

    React拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用

    React特点

    1.声明式设计-React采用声明范式,可以轻松描述应用

    2.高效-React通过对DOM的模拟,最大限度地减少与DOM的交互

    3.灵活-React可以与已知的库或框架很好的配合

    4.JSX-JSX是JavaScript语法的扩展,React开发不一定使用JSX,建议使用

    5.组件-通过React构建组件,使得代码更加容易得到复用,能够更好的应用在大项目的开发中

    6.单向响应的数据流-React实现了单向的数据流,从而减少了重复代码,因此比传统数据绑定更简单

     

    React 安装

    1.React可以下载直接使用

    点击React官网前往下载最新版

    2.使用CDN库

    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>//React核心库
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>//提供与DOM相关的功能
    <!-- 生产环境中不建议使用 -->
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

    React实例

    如果需要使用JSX,则<script>的type属性需要设置为text/babel

    <body>
     
    <div id="example"></div>
    <script type="text/babel">
    ReactDOM.render(
        <h1>Hello, world!</h1>,
    //将h1标题插入到example节点中
        document.getElementById('example')
    );
    </script>
     
    </body>

    通过 npm 使用 React

    npm install -g cnpm --registry=https://registry.npm.taobao.org
    npm config set registry https://registry.npm.taobao.org

    也可以使用cnpm命令工具代替默认的npm(较快)点击查看淘宝镜像

    cnpm install [name]

     使用create-react-app快速构建React开发环境

    create-react-app是来自Facebook,通过该命令我们无需配置就能快速构建react环境

    createa-react-app自动创建的项目是基于Webpack +Es6

    创建项目

    cnpm install -g create-react-app
    create-react-app my-app
    cd my-app/
    npm start

     完成之后在浏览器打开localhost:3000运行结果如下:

     

    展开全文
  • 现在最热门的前端框架有AngularJS、React、Bootstrap等。自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领略 ReactJS的风采吧~~ 章有点长,耐心读完,你会有很大...

    现在最热门的前端框架有AngularJS、React、Bootstrap等。自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领略
    ReactJS的风采吧~~ 章有点长,耐心读完,你会有很大收获哦~

    一、ReactJS简介

    React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单。所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具。

    ReactJS官网地址:http://facebook.github.io/react/

    Github地址:https://github.com/facebook/react

    二、对ReactJS的认识及ReactJS的优点

    首先,对于React,有一些认识误区,这里先总结一下:

    • React不是一个完整的MVC框架,最多可以认为是MVC中的V(View),甚至React并不非常认可MVC开发模式;

    • React的服务器端Render能力只能算是一个锦上添花的功能,并不是其核心出发点,事实上React官方站点几乎没有提及其在服务器端的应用;

    • 有人拿React和Web Component相提并论,但两者并不是完全的竞争关系,你完全可以用React去开发一个真正的Web Component;

    • React不是一个新的模板语言,JSX只是一个表象,没有JSX的React也能工作。

    1、ReactJS的背景和原理

    在Web开发中,我们总需要将变化的数据实时反应到UI上,这时就需要对DOM进行操作。而复杂或频繁的DOM操作通常是性能瓶颈产生的原因(如何进行高性能的复杂DOM操作通常是衡量一个前端开发人员技能的重要指标)。React为此引入了虚拟DOM(Virtual DOM)的机制:在浏览器端用Javascript实现了一套DOM API。基于React进行开发时所有的DOM构造都是通过虚拟DOM进行,每当数据变化时,React都会重新构建整个DOM树,然后React将当前整个DOM树和上一次的DOM树进行对比,得到DOM结构的区别,然后仅仅将需要变化的部分进行实际的浏览器DOM更新。而且React能够批处理虚拟DOM的刷新,在一个事件循环(Event Loop)内的两次数据变化会被合并,例如你连续的先将节点内容从A变成B,然后又从B变成A,React会认为UI不发生任何变化,而如果通过手动控制,这种逻辑通常是极其复杂的。尽管每一次都需要构造完整的虚拟DOM树,但是因为虚拟DOM是内存数据,性能是极高的,而对实际DOM进行操作的仅仅是Diff部分,因而能达到提高性能的目的。这样,在保证性能的同时,开发者将不再需要关注某个数据的变化如何更新到一个或多个具体的DOM元素,而只需要关心在任意一个数据状态下,整个界面是如何Render的。

    如果你像在90年代那样写过服务器端Render的纯Web页面那么应该知道,服务器端所要做的就是根据数据Render出HTML送到浏览器端。如果这时因为用户的一个点击需要改变某个状态文字,那么也是通过刷新整个页面来完成的。服务器端并不需要知道是哪一小段HTML发生了变化,而只需要根据数据刷新整个页面。换句话说,任何UI的变化都是通过整体刷新来完成的。而React将这种开发模式以高性能的方式带到了前端,每做一点界面的更新,你都可以认为刷新了整个页面。至于如何进行局部更新以保证性能,则是React框架要完成的事情。

    借用Facebook介绍React的视频中聊天应用的例子,当一条新的消息过来时,传统开发的思路如上图,你的开发过程需要知道哪条数据过来了,如何将新的DOM结点添加到当前DOM树上;而基于React的开发思路如下图,你永远只需要关心数据整体,两次数据之间的UI如何变化,则完全交给框架去做。可以看到,使用React大大降低了逻辑复杂性,意味着开发难度降低,可能产生Bug的机会也更少。

    2、组件化

    虚拟DOM(virtual-dom)不仅带来了简单的UI开发逻辑,同时也带来了组件化开发的思想,所谓组件,即封装起来的具有独立功能的UI部件。React推荐以组件的方式去重新思考UI构成,将UI上每一个功能相对独立的模块定义成组件,然后将小的组件通过组合或者嵌套的方式构成大的组件,最终完成整体UI的构建。例如,Facebook的instagram.com整站都采用了React来开发,整个页面就是一个大的组件,其中包含了嵌套的大量其它组件,大家有兴趣可以看下它背后的代码。

    如果说MVC的思想让你做到视图-数据-控制器的分离,那么组件化的思考方式则是带来了UI功能模块之间的分离。我们通过一个典型的Blog评论界面来看MVC和组件化开发思路的区别。

    对于MVC开发模式来说,开发者将三者定义成不同的类,实现了表现,数据,控制的分离。开发者更多的是从技术的角度来对UI进行拆分,实现松耦合。

    对于React而言,则完全是一个新的思路,开发者从功能的角度出发,将UI分成不同的组件,每个组件都独立封装。

    在React中,你按照界面模块自然划分的方式来组织和编写你的代码,对于评论界面而言,整个UI是一个通过小组件构成的大组件,每个组件只关心自己部分的逻辑,彼此独立。

    072132381261891600.jpg

    React认为一个组件应该具有如下特征:

    (1)可组合(Composeable):一个组件易于和其它组件一起使用,或者嵌套在另一个组件内部。如果一个组件内部创建了另一个组件,那么说父组件拥有(own)它创建的子组件,通过这个特性,一个复杂的UI可以拆分成多个简单的UI组件;

    (2)可重用(Reusable):每个组件都是具有独立功能的,它可以被使用在多个UI场景;

    (3)可维护(Maintainable):每个小的组件仅仅包含自身的逻辑,更容易被理解和维护;

    三、下载ReactJS,编写Hello,world

    ReactJs下载非常简单,为了方便大家下载,这里再一次给出下载地址(链接),下载完成后,我么看到的是一个压缩包。解压后,我们新建一个html文件,引用react.js和JSXTransformer.js这两个js文件。html模板如下(js路径改成自己的):

    QQ截图20150721110651.png

    这里大家可能会奇怪,为什么script的type是text/jsx,这是因为 React 独有的 JSX 语法,跟 JavaScript 不兼容。凡是使用 JSX 的地方,都要加上 type="text/jsx" 。 其次,React 提供两个库: react.js 和 JSXTransformer.js ,它们必须首先加载。其中,JSXTransformer.js 的作用是将 JSX 语法转为 JavaScript 语法。这一步很消耗时间,实际上线的时候,应该将它放到服务器完成。

    到这里我们就可以开始编写代码了,首先我们先来认识一下ReactJs里面的React.render方法:

    React.render 是 React 的最基本方法,用于将模板转为 HTML 语言,并插入指定的 DOM 节点。

    下面我们在script标签里面编写代码,来输出Hello,world,代码如下:

    QQ截图20150721111143.png

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

    然后,在浏览器打开这个页面,就可以看到浏览器显示一个大大的Hello,world,因为我们用了

    标签。

     

    到这里,恭喜,你已经步入了ReactJS的大门~~下面,让我们来进一步学习ReactJs吧~~

    四、Jsx语法

    HTML 语言直接写在 JavaScript 语言之中,不加任何引号,这就是 JSX 的语法,它允许 HTML 与 JavaScript 的混写,了解过AngularJs的看到下面的代码一定会感觉很熟悉的,我们来看代码:

    QQ截图20150721111531.png

    这里我们声明了一个names数组,然后遍历在前面加上Hello,输出到DOM中,输出结果如下:

    QQ截图20150721111639.png

    JSX 允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组,则会展开这个数组的所有成员,代码如下:

    QQ截图20150721111724.png

    显示结果如下:

    QQ截图20150721111738.png

    这里的星号只是做标识用的,大家不要被迷惑了~~

    你看到这里,说明你对React还是蛮感兴趣的,恭喜你,坚持下来了,那么下面,我们开始学习React里面的"真功夫"了~~ Are you ready?

    五、ReactJS组件

    1、组件属性

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

    下面,我们来编写第一个组件Greet,有一个name属性,然后输出hello + name的值,代码如下:

    QQ截图20150721111858.png

    看到这段代码,接触过AngularJS的朋友们是不是有一种熟悉的感觉,不过这里有几点需要注意:

    1)获取属性的值用的是this.props.属性名

    2)创建的组件名称首字母必须大写。

    3)为元素添加css的class时,要用className。

    4)组件的style属性的设置方式也值得注意,要写成style={{width: this.state.witdh}}。

    2、组件状态

    组件免不了要与用户互动,React 的一大创新,就是将组件看成是一个状态机,一开始有一个初始状态,然后用户互动,导致状态变化,从而触发重新渲染 UI 。下面我们来编写一个小例子,一个文本框和一个button,通过点击button可以改变文本框的编辑状态,禁止编辑和允许编辑。通过这个例子来理解ReactJS的状态机制。先看代码:

    QQ截图20150721112014.png

    这里,我们又使用到了一个方法getInitialState,这个函数在组件初始化的时候执行,必需返回NULL或者一个对象。这里我们可以通过this.state.属性名来访问属性值,这里我们将enable这个值跟input的disabled绑定,当要修改这个属性值时,要使用setState方法。我们声明handleClick方法,来绑定到button上面,实现改变state.enable的值。效果如下:

    072305421429007.gif

    原理分析:

    当用户点击组件,导致状态变化,this.setState 方法就修改状态值,每次修改以后,自动调用 this.render 方法,再次渲染组件。

    这里值得注意的几点如下:

    1)getInitialState函数必须有返回值,可以是NULL或者一个对象。

    2)访问state的方法是this.state.属性名。

    3)变量用{}包裹,不需要再加双引号。

    3、组件的生命周期

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

    • 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):组件判断是否重新渲染时调用

    下面来看一个例子:

    QQ截图20150721112254.png

    上面代码在hello组件加载以后,通过 componentDidMount 方法设置一个定时器,每隔100毫秒,就重新设置组件的透明度,从而引发重新渲染。

    4、组件的嵌套

    React是基于组件化的开发,那么组件化开发最大的优点是什么?毫无疑问,当然是复用,下面我们来看看React中到底是如何实现组件的复用的,这里我们还写一个例子来说吧,代码如下:

    QQ截图20150721112325.png

    这里我们创建了一个Search组件,然后又创建了一个Page组件,然后我们在Page组件中调用Search组件,并且调用了两次,这里我们通过属性searchType传入值,最终显示结果如图:

    六、ReactJS小结

    关于ReactJS今天就先学习到这里了,下面来总结一下,主要有以下几点:

    1、ReactJs是基于组件化的开发,所以最终你的页面应该是由若干个小组件组成的大组件。

    2、可以通过属性,将值传递到组件内部,同理也可以通过属性将内部的结果传递到父级组件(留给大家研究);要对某些值的变化做DOM操作的,要把这些值放到state中。

    3、为组件添加外部css样式时,类名应该写成className而不是class;添加内部样式时,应该是style={{opacity: this.state.opacity}}而不是style="opacity:{this.state.opacity};"。

    4、组件名称首字母必须大写。

    5、变量名用{}包裹,且不能加双引号。

    七、参考资料

    React中文文档 

    React入门实例教程

    颠覆式前端UI开发框架:React

    展开全文
  • 所以决定做一个react入门总结。 首先,在实现crud操作前我们需要了解,React是如何操作修改数据,先看一个简单的demon,react是如何实现数据双向绑定(我理解的数据双向绑定) 一、简单的双向绑定 ...
    学习一门语言,貌似最基础的demo练习就是实现CRUD操作。所以决定做一个react入门总结。
    首先,在实现crud操作前我们需要了解,React是如何操作修改数据,先看一个简单的demon,react是如何实现数据双向绑定(我理解的数据双向绑定)

    一、简单的双向绑定

    这里面有几点需要注意的:
    1. constructor:如果在react中需要添加state默认值,或者绑定事件,需要写在constructor方法中。
    2. super(props):在这里调用super是因为在ES6中,子类的constructor中必须先调用super才能引用this,使用super(props)的目的是在constructor中可以使用this.props,因为我们这里Main虽然是一个子组件,但是却没有传参数给它所以不需要使用this.props调取父标签传递的参数,所以super(props)可以去掉。在什么样的情况一定需要:
    比如外标签是<Main name='testName'></Main>,那么在Main组件中的constructor中就可以通过this.props.name来获取。
    3. 组件创建:react创建组件有三种方法,分别是:
        1>. 无状态组件:定义方式就是通过 function XXX(){} ,无状态组件的特点是创建速度快,不需要实例化性能损耗少,但是在无状态组件中不能使用生命周期
        2>. ES5方式定义组件:定义方式通过 React.createClass,特点是组件具有生命周期,创建组件需要实例化,因此会有相应的性能损耗,相比较ES6定义方式在mounting阶段多了两个钩子函数 getDefaultProps()  getInitialState() 分别用于定义props,state,位于componentWillMount阶段前发生。
        3>. ES6方式定义组件:定义方式通过extends React.Component,特点与ES5创建方式类似不同是没有getDefaultProps()  getInitialState() 这两个钩子函数,可以通过setSate直接赋值。
    4. this指向:我们在render中调用方法的时候需要通过bind绑定this的指向,因为在component中this指向的是globle。
    5. setState:在react中state中的值不支持直接赋值,必须通过setState的形式提交修改,setState是异步的。


    二、实现Retrieve(查询)操作  

    这一部分定义,调用了几个方法:
    changeValue:用于改变input框输入值时触发调用,通过event.target.value获取当前输入值,通过setState修改value值
    queryData:用于点击查询后调取后台接口,调用时绑定this指向,通过this.state.value获取value调用异步方法向后台请求(注:getList是封装后的axio数据请求)
    componentDidMount:react生命周期,Mounting阶段在render渲染前调用,因为这里的的<Table></Table>是一个表格组件,我期望在页面刷新的同时加载出表格初始数据,因此需要在dom渲染前完成调用。
    (注意:react是JSX语法规则,组件创建时会出现class字段,所以在标签使用中它用className代替html中的class属性)
    (注:因为react是JSX语法规则,所以如果要实现类似vue中的v-for指令需要结合数组map方法,如下:

    react在列表循环过程中必须有特殊属性key,且唯一)

    三、React生命周期
        
           react生命周期(组件从创建到消失的整个过程)分为三个阶段  mounting(实例化期)     updating(存在期)    unmounting(销毁期)
    1.  实例化阶段(mounting)
    mounting阶段就是component被render解析生成对应的DOM节点,并被插入浏览器的DOM结构的一个过程(组件从无到有的过程)。
    (注:getDefaultProps(),getDefaultState()是react ES5版本的,在reactES6版本中已经被废弃,不建议使用,是用于初始化定义state,props的默认值)
    1>. componentWillMount
    该方法在首次渲染(调用render方法)之前调用,在这一阶段组件还未开始实例化,类似于vue生命周期中的created
    项目应用:用于做一些组件初始化前需要调用的数据处理,也可以在这一阶段触发loading事件。
    2>. componentDidMount
    这个方法在首次渲染(调用render方法)之后调用,在这一阶段组件已经实例化完成,类似于vue生命周期中的mounted
    应用:dom加载完成后,发起axios请求,拿回数据,结束loading事件。
    2.  存在期(updating)
    一个mounted的React Components被重新render的过程
    (只有state,props确实被改变了react才会改变对应的Dom结构,这句话)
    1>. componentWillReceiveProps
    当一个mounted要接收新的props时会被调用,函数参数就是将要接收的props,应用例如,子组件表格从父组件获取props,并在每次props更新后随之更新表格数据。
    2>. shouldComponentUpdate
    是否有必要跟新dom结构,参数是新的props对象,和新的state对象,分别对比this.props和this.state返回true为跟新,返回false为不更新
    3>. componentWillUpdate
    如果shouldComponentUpdate返回为true则调用,组件更新前调用,首次render不调用
    4>. componentDidUpdate
    componentWillUpdate之后执行,组件重新render后调用,首次render不调用
    3. 销毁期(unmounted)
    一个mounted的React Components对应的DOM节点被从Dom节点移除的过程
    componentWillUnmount
    component销毁阶段,类似于vue中的destroyed
    应用:释放内存资源的过程




    展开全文
  • React 入门实例教程

    2019-03-20 11:03:55
    现在最热门的前端框架,毫无疑问是ReactReact 起源于 Facebook 的内部项目,因为该公司对市场上所有JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设Instagram的网站。做出来以后,发现这套东西很好...
  • React入门

    2020-07-27 16:44:02
    如何获取这三个文件?...react.js npm i react --save react-dom.js npm i react-dom --save bable npm i babel-standalone --save 具体操作流程: (1)新建项目文件夹: (2)win+R 打开控制台,cd进入项目文件夹
  • ReactJs简介 反应最初来自Facebook的内部的广告系统项目,项目实施过程中前端开发遇到了巨大挑战,代码变得越来越臃肿且混乱不堪,难以维护于是,痛定思痛,他们决定抛开很多所谓的“最佳实践” ,重新思考前端界面...
  • 学习React不是一蹴而就的事情,入门似乎也没那么简单。但一切都是值得的。今天给大家带来一个详细的React的实例,实例并不难,但对于初学者而言,足够认清React的思考和编写过程。认真完成这个实例的每一个细节会让...
  • web端三大框架react、vue和angular,下面是对react.js的一些总结。 一、环境搭建 1、npm搭建项目 推荐使用npm搭建项目环境,如果网速过慢,可是使用cnpm进行项目的搭建(cnpm是淘宝的npm镜像,与npm有些差异,...
  • 转载...上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑。 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC
  • react入门的资料ppt

    2020-07-25 23:33:36
    react入门的资料ppt,适合新手学习的路线,又兴趣的同学可以下载来看看,对你的以后的人生技术会有很多的助力,方便了你以后往前端方向的转型,x
  • React入门知识汇总

    2019-08-12 20:44:32
    React入门知识汇总开发环境的搭建组件(Component)组件之间通信(props与state)props   由于最近1个月在工作当中需要写前端的页面,于是用到了React,也算是入门了吧,同时组件库用到了公司内部的一些组件,...
  • 读阮一峰的React 入门实例教程有感阮一峰的React入门实例教程其实我在一年前就读过,当时就想学习React,其实那个时候刚刚jQuery入门,啥也不懂,看得云里雾里,所以后来就没有继续研究下去了。 而这一年过来,技术...
  • react下载-react入门-react.js下载多类库js下载 React 是一个用于构建用户界面的 JAVASCRIPT 库。 React主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。 React 起源于 Facebook 的内部项目,用来架设 ...
  • React入门教程(思维导图) 参考文档:http://www.ruanyifeng.com/blog/2015/03/react.html
  • React入门(一)

    2018-05-23 02:10:50
    之前在进行前端工作时,也做过几个使用React框架的前端项目,最近的毕业设计也是做了一个react框架的电子商务平台,答辩完后发现个人对于React还没有做一个总结,为了准备以后的面试,在最近几天慢慢的整理出来吧。...
  • react入门

    2017-05-22 15:20:34
    react入门介绍: facebook/react react awesome-react 中文入门介绍: React 入门教程 babel可以把es6转为es5 https://kangax.github.io/compat-table/es6/查看浏览器对es6的支持情况使用npm配置React环境 基于...
  • React入门之路

    2018-04-07 20:17:34
    React入门之路 jsx 注释 1、在标签内部的注释需要花括号 2、在标签外的的注释不能使用花括号 ReactDOM.render( /*注释 */ &lt;h1&gt;孙朝阳 {/*注释*/}&lt;/h1&gt;, ...
  • react入门--------第三章react和vue的区别react和vue的区别要从列表渲染、条件渲染、事件绑定、属性绑定 vue 1、列表渲染 v-for 2、条件渲染 v-if 3、事件绑定 v-on 4、属性绑定 v-bind react ...
1 2 3 4 5 ... 20
收藏数 23,300
精华内容 9,320
关键字:

react入门