react初识

如下是在研究中记录的笔记:

1,作用:局部的更新dom结构;虚拟dom保证性能

2,和mvc不同,mvc是对于技术上的分离(分类),而react是组件上的分离,每个视图模块分离,复用,以视图模块为单位

3,2的说法确实有所体现,而且,我感觉好像模板引擎啊,难道是我幼稚?

4,浅析语法:

html : <div id='box'></div>

jsx

js code...

ReactDOM.render(html_jsx_deal,document.getElementById('box'));

</script>

5,还可以将jsx代码放在js文件中,然后引入,<script type='text/babel' src='..'></script>,这样引入,后面的引入的模块错了,

运行也不会受到影响的

6.自设定的属性要加data-mine在标签中

7.没有if else ,用三目运算符

8,js表达式写在{}中,注释也写在花括号中

9,var show = {

fontSize:30,

color:'red',

background:'black'

}

ReactDOM.render(

//html标签后面是逗号

<h2 style={show}>hello world this is my first react js</h2>,

document.getElementById('show')

)

内联样式的写法,而且是推荐内联样式的

10,感觉jsx不可以遍历对象我日诸如for()方法都不可用

11,browser.js上线后,要放到服务器完成,否则很耗时间?????????????????有转码工具进行转码

12****important

遍历的表达式外层要有父标签的包裹,否则会报错,如:而且还证明了对象是可以处理的

var you = [{name:'me'},{name:'zhongyaji'}];

ReactDOM.render(

//如这种回报错

//{

// you.map(function(e){

// return <h2>{e.name}</h2>

// })

//}

//这种就ok,循环loop处有h2的包裹

<h2>

{

you.map(function(e){

return <h2>{e.name}</h2>

})

}

</h2>

document.getElementById('one')

)

13,这里研究是否可以用for和单纯的对象:

这里是不能够这么写的:

var lover= {name:'zhongyaji',age:'21',position:'princess',emotion:'deep and would not give up'};

ReactDOM.render(

<h1><strong>Introduce my wife</strong></h1>

<ul>

{

for(var i in lover){

<h3>{i}:{lover[i]}</h3>

}

</ul>,

document.getElementById('two')

)

14,关于组件有如下亲笔栗子:---important组件开头名必须

组件调用了不能在有其他代码了,

而且,要拼接组件,只能在调用之前拼接好(符合组件:如下)

var ModleChase = React.createClass({

render:function(){

return <h2>我的爱人组件:{this.props.lover}<h4>只能有一个顶级的元素,这个费顶级,就是只有一个父亲h2</h4></h2>

}

});

ReactDOM.render(

//果然只能有一个父元素,一女不容2男

// <h1>我的爱人是</h1>

<ModleChase lover='zhongyaji'/>,

document.getElementById('two')

)

</script>

15,组件的拼接:符合组件

var Wuruijie = React.createClass({

render:function(){

return (<strong>emotion to zhongyaji:{this.props.say}</strong>)

}

})

var Zhongyaji = React.createClass({

render:function(){

//return后面要加小括号坑爹啊

return (<strong>emotion to wuruijie :{this.props.say}</strong>)

}

})

var Makelove = React.createClass({

render:function(){

//这个return 有无括号无所谓

return (

<div>

{this.props.love}

</div>)

}

})

ReactDOM.render(

//这个斜线必须加

<Makelove love='爱的构造'/>,

document.getElementById('three')

)

</script>

注.this.props.children是它的不可自定义

16,状态的改变

寄托于组件

var ChangeState = function(){

getInitialState:function(){

return {flag:true}

changeHandle:function(event){

//event事件对象

//设置为相反的状态,然判断这个来給dom

this.setState:({flag:!this.state.flag});

render:function(){

var text = this.state.flag?'true':'false';

return (

<p onClick={this.changeHandle}>{text}{this.props.jj}</p>

);

}

17,在react中的交互靠的就是状态,对的,所以state很重要,,而且,this.state...可以得到状态,要改变,需要this.setState,只要状态改变了,

自动调用this.render来渲染

18,渐渐体会到了react的精髓,暴露的仅仅是有着不同属性的html自定义标签,然后,属性和动态的,都由React.createClass({中的方法})

来进行控制,变化,主要靠state,对于一个组件是全局的,还有props,对于一个组件的属性也是全局的

19,react在state改变之后,自动调用render来进行渲染,关于如何渲染?触发改变?规定方法,时间触发了就改变.移除更新也是

20,style的写法应该是 <div style={{color:red;background:blue}}></div>

21,不应将转化放在客户端靠browser.js,很慢,而应当在服务端时候,用工具,就转化编译好,npm install -g react-tools

然后,jsx --watch origin/ use/来监听和转化!

如下时候亲手亲测代码:

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>react</title>
    <script type="text/javascript" src='../lazyload/jquery-2.1.4.min.js'></script>
    <script type="text/javascript" src='react.min.js'></script><!--核心库-->
    <script type="text/javascript" src='react-dom.min.js'></script><!--dom操作-->
    <script type="text/javascript" src='browser.js'></script><!--jsx转化为js-->
</head>
<body>
    <div id="show"></div>
    <div id="list"></div>
    <div id='love'></div>
    <div id='hate'></div>
    <div id='hated'></div>
    <!--这里是jsx-->
    <script type="text/babel" src='react_out.js'></script>
    <script type="text/babel">
    
        //是小括号
        //ReactDOM外部写js,内部写ReactDOM.render();
        var name = ['wuruijie','zhongyaji'];
        console.log(name);
        //遍历数组的
        ReactDOM.render(
            <ul>
            {
                name.map(function(each){
                    return <li>lovers:{each}</li>
                })
            }
            </ul>,
            document.getElementById('list')
        );
        //数组的
        var arr = [<h1>我要加油为了钟亚姬</h1>,<h2>一定要等我</h2>];
        ReactDOM.render(
            <div>我的感觉{arr}我的感觉</div>,
            document.getElementById('love')
            )
    </script>
    <!--对象的测试-->
    <div id="one"></div>
    <script type="text/babel">
        var you = [{name:'me'},{name:'zhongyaji'}];
        ReactDOM.render(
            <h3>
            {
                you.map(function(e){
                    return <h2>{e.name}</h2>
                })
            }
            </h3>
            ,
            document.getElementById('one')
        )
    </script>

    <!--组件化-->
    <div id="two"></div>
    <script type="text/babel">
        var ModleChase = React.createClass({
            render:function(){
                return (<h2>我的爱人组件:{this.props.lover}<h4>只能有一个顶级的元素,这个费顶级,就是只有一个父亲h2</h4></h2>)
            }
        });
        var Angle = React.createClass({
            render:function(){
                return (<h3>hahahahhahahhah{this.props.say}</h3>)
            
            }
        })
        ReactDOM.render(
            // <h1>我的爱人是</h1>s
            // <Angle say='i love you zhongyaji'/>
            <ModleChase lover='zhongyaji'/>,
            document.getElementById('two')
            )
    </script>
    <!--符合组件-->
    <div id="three"></div>
    <script type="text/babel">
        var Wuruijie = React.createClass({
            render:function(){
                return (<strong>emotion to zhongyaji:{this.props.say}</strong>)
            }
        })
        var Zhongyaji = React.createClass({
            render:function(){
                //return后面要加小括号  坑爹啊
                return (<strong>emotion to wuruijie :{this.props.say}</strong>)
            }
        })
        var Makelove = React.createClass({
            render:function(){
                return (
                    <div>
                        {this.props.love}
                        <Wuruijie say='我爱仙女'/>
                        <Zhongyaji say='我爱吴师傅'/>
                    </div>)
            }
        })
        ReactDOM.render(
            <Makelove love='爱的构造'/>,
            document.getElementById('three')
            )
    </script>

    <!--状态,的改变-->
    <div id="fairy"></div>
    <script type="text/babel">
        var Changeemotion = React.createClass({
            //初始化状态,用true和false来赋值,普遍的,这个函数固定的-亲测如此
            getInitialState:function(){
                //这个函数一般都是返回一个初始状态
                return {emotion:true};
            },
            //这个函数是自定义的
            changHandler:function(event){
                //event是事件对象,固定的setState
                // this.setState({emotion:!this.state.emotion});
                //两个一样和上面的写法
                this.setState(function(state){
                    return {emotion:!state.emotion}
                })
            },
            //设定默认的props,不指定时候默认  getDefaultProps
            getDefaultProps:function(){
                return {
                    other:'<em>hahah</em>'
                };
            },
            //拼接
            render:function(){
                var text = this.state.emotion?'我真的爱你':'我有苦衷,但是还是爱你';
                return (
                    <strong data-hello='you' onClick={this.changHandler}>这个情感是:{this.props.other}{text}</strong>
                    )
            }
        })

        ReactDOM.render(
            //此处就算不写other,也有默认的
                <Changeemotion />,
                document.getElementById('fairy')
            )
    </script>
    
    <!--联动狂-->
    <div id="all_move"></div>
    <script type="text/babel">
        var Content = React.createClass({
            
            render:function(){
                return (
                    <div>
                        <input value={this.props.emotion} type='text' onChange={this.props.deal_fun}/>
                        <h1 >{this.props.emotion}</h1>
                    </div>
                    )
            }
        })
        var Show = React.createClass({
            getInitialState:function(){
                return {emotion:'We love toghether!'};
            },
            inputHandler:function(event){
                this.setState({emotion:event.target.value});
            },
            render:function(){
                return (
                    <div>
                        <Content emotion={this.state.emotion} deal_fun={this.inputHandler}></Content>
                    </div>
                    )
            }
        });
        ReactDOM.render(
            <Show></Show>,
            document.getElementById('all_move')
            )
    </script>
    <!--ajax实现-->
    <div id="ajax"></div>
    <script type="text/babel">
    //建立一个ajax功能的标签
        var Ajax_label = React.createClass({
            //一般都由的初始化state,贯穿一条线
            getInitialState:function(){
                return {
                    modle:{
                        name:'modle',
                        express:'the protector of princess'
                    },
                    lover:{
                        name:'she',
                        age:'16',
                        emotion:'deep and deep'
                    }
                }
            },
            //这里的bind是为了保证this的指向始终指向实体元素(我们所构造的)
            componentDidMount:function(){
                this.serverRequest = $.get(this.props.path,function(data){
                    console.log(data);
                    this.setState({
                        lover:data
                    })
                }.bind(this),'json');
            },
            //当组件移除时候,应当销毁的操作
            componentWillUnmount:function(){
                this.serverRequest.abort();
            },
            render:function(){
                return (
                    <div>
                        <h2>modle_msg:{this.state.modle.name} and duty on {this.state.modle.express}</h2>
                        <h1>fairy_msg:{this.state.lover.name} and age is {this.state.lover.age} and {this.state.lover.emotion}</h1>
                    </div>
                )
            }
        })

        setTimeout(function(){
            ReactDOM.render(
                <Ajax_label path='lover.json'/>,
                document.getElementById('ajax')
                )
        },10000)
    </script>

</body>
</html>

转载于:https://www.cnblogs.com/modle-sherlock/p/5448348.html

react初识

继续阅读

七牛云-C#SDK-上传-前期准备

nodejs微信开发---授权登录+获取用户信息微信网页授权

debian9升级4.9.0内核到4.19.2内核过程

[转]iOS微信小视频优化心得

Javascript构建Bingo卡片游戏

JavaScript的那些坑之事件代理事件代理事件阶段

javascript的for (var i in data)慎用javascript中的for (var i in data)谨慎用

tab鼠标经过菜单切换

vue （vue2.0）使用总结(从大体结构总结)

vue搭建过程及出现问题

/\B(?=(?:\d{3})+$)/g 一条令人费解的正则表达式

适用于JavaScript的ECMAScript 2020规范向前发展

JS生成uuid的四种方法

测试面试题整理

layui多任务上传添加进度条