react

故事扮演 提交于 2020-01-07 03:58:27

react(git里搜索可下载)

react vue中文系  angular

jquery(能做的太少了) do more(samall)

react(原生App开发) vue angular

云   php /////node.js java c++ python ruby  c#  go  erlang

=======================网络

端  html css js  c  objecy-c  java

pc浏览器(网站)  手机浏览器(webApp) pad浏览器(网站)

手机app里有嵌入的浏览器(hybird APP)

原生app
---------------------------------------------------  

atm  手表 眼睛  vr眼睛  电脑屏幕

es2015=es6ui
ecmascript  5

数组的方法

arr.push()      将括号里的东西放入数组里
arr.pop()       取数组的最后一个
arr.shift()     取数组第一个
arr.slice()     截取
arr.splice()    替换和截取

arr.join()      将数组的值连接到一起
arr.concat()    连接数组  原数组不变

arr.sort()      按照阿斯克码排序
    arr.sort((a,b)=>a<b);反序
    arr.map(v=>'.'+v)数值前加“.”

arr.forEach()   遍历数组
arr.map()       映射
arr.filter()    过滤 从原数组中获得一个更小的例子

本质都是对象 虚拟DOM

方法1 元素 每一个元素只能有一个父元素

var el=<h1>this is h1</h1>;

方法2 组件

props 只要有值就能传

var root=document.querySelector('#container');
class Header extends React.Component{
    render(){
        //传递实参
        return (
            <h3 onClick={this.props.fn?()=>{this.props.fn('a')}:null}>
                {this.props.number?<span>{this.props.number}</span>:null}
                {this.props.float?<span>{this.props.float}</span>:null}
                {this.props.string?<span>{this.props.string}</span>:null}
                {this.props.el?<span>{this.props.el}</span>:null}
                {this.props.fn?'this is fn':null}
            </h3>
        );
    }
}
class Page extends React.Component{
    //只要是值就能传过去
    render(){
        return(
            <div>
                <Header number={1}/>
                <Header float={1.3}/>
                <Header string="string"/>
                <Header fn={(x)=>{console.log(x)}}/>
                <Header el={<div>this is el</div>}/>
            </div>
        );
    }
}
ReactDOM.render(<Page/>,root);

    //call apply bind(输出和原函数一模一样的函数)
    //状态一旦发生变化页面就会自动更新

154

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!