点进去那篇作品,作者相信你一定是2个爱念书,爱劳动,爱技术的一等好骚年,React能够说是一门新技巧,在React方面本人也是菜鸟贰个,那么就让大家一块走进React的世界,学习她,拥抱他,亲吻他呢,let’s
go!走起

那篇文章首发在自身的博客里面
http://www.codertian.com/2016/04/08/learn-react-part-one/

自作者保险那里面包车型地铁事例都以最简便易行的,笔者简单了再精简,只为博君一笑:so easy!

关于React

React本来是facebook里头的八个JavaScript类库,在二〇一三年开源了。React是用以创立web用户交互界面包车型大巴库,很几个人都把她看成MVC框架的V。想当初我们付出前端页面,数据变动了笔者们要去手动更新DOM,数据变动的多,大家DOM操纵的也多。就问您一句“烦不烦?”。直到蒙受了React,那么憋屈的日子一无往返了。

虚拟DOM

既然不用手动更改DOM,那么React是怎么控制的呢?React有三个虚构DOM,当数码变化React会更改虚拟DOM树,并盘算与真正展现的DOM的不一样,然后以细小的DOM更改来更新任何应用程序。

组件化

React主导就是组件(component),把本来的页面看成很多组件,二个组件一个零部件的贯彻,这个零部件的咬合就能结成二个界面了。就好比我们穿的一件一件的服装一样,没有穿衣装正是光光的

骚年别怕,或者你刚开始不领悟,但是等你写了多少个小demo的时候,这么概念就会明白了。

Hello World

常规,我们先使用React达成2个Hello World!

<body>
  <div id="test"></div>
  <script type="text/babel">
    ReactDOM.render(    
      <h1>你好,世界!</h1>,  //第一个参数传进入要显示的数据
      document.getElementById('test') //第二个参数是把上面要显示的数据添加到test节点上面
    );
  </script>
</body>

来得Hello
World是否很粗大略,看领悟了script的type为text/babel,不是我们平常的text/script

代码点击那里demo

JSX

上学React你早晚要知道JSX,JSX便是JavaScript XML一种在React组件内部塑造标签类的XML语法,相当于看起来像是HTML标签那种,不过大家也足以绝不JSX,然而人家官方推荐大家用,所以我们也最好应用JSX语法。组件展现的时候会把JSX格式的组件转换为常规的JavaScript格式,然后显示。所以使用与不行使JSX,最终都会转为符合规律的JavaScript

使用JSX
<a href="https://facebook.github.io/react/">Hello!</a>

不使用JSX
React.createElement('a', {href: 'https://facebook.github.io/react/'}, 'Hello!')

看来那样子的自己检查自纠本身照旧默默的选拔jsx啊,所以本骚年自身也建议大家利用JSX语法。

组件

都说了React的中坚正是组件,大家应用各样零件来创设八个页面,上边正是1个创造组件的事例

<body>
  <div id="test"></div>
  <script type="text/babel">
    //创建组件
    var TestComponent = React.createClass({
      render: function() {  //渲染函数,就是返回这个组件包含的内容
        return ( <h1>还是你好,世界!!!</h1> );
      }
    });

  ReactDOM.render(
    <TestComponent />,
    document.getElementById('test')
  );
  </script>
</body>

TestComponent就是我们创制的二个零部件,一定要切记这几个是大写字母开始的,一定要牢记,大家选拔React.createClass函数创造组件,组件中得以包罗想要重临的html内容。
代码点击这里demo

state

组件就一定于2个全部,那个全体的在那之中肯定要有投机的数码吧,state是组件内部的蕴藏数据的地点,这么些state只存在组件内部,数据也只是供内部接纳的。万语千言不如代码一句话。看代码裸
起先化组件的state要在函数getInitialState中,初始化

var TestComponent = React.createClass({
    //初始化state
    getInitialState: function() {
      return {
        showElem: true,     //这是两个属性
        myHobby: '编程'
      };
    },

    //渲染函数
    render: function() {
      var hobby;
      if(this.state.showElem) {
        hobby = this.state.myHobby;
      }

        return (
          <p>{hobby}</p>
        );
    }
});

我们第三创建三个TestComponent零件,然后在她的getInitialState艺术中初阶化我们的state,然后在render函数中,判断是不是出示myHobby

代码点击那里demo

props

props与state正好相反,props是二个零件的事件源,也得以视作组件的外交官,父组件可以把手组件需求展现的多寡传递给子组件的props,子组件就足以根据他的props来显示东西。props是只读的,一定要把它就是只读的,props在组件内部是无法改变的。
state能够在内部调用this.setState来改变state的值,但是相对不要在其间调用this.setProps去改变props的值,笔者再说三次,props是只读的。

var TestComponent = React.createClass({
  //设置一下属性的默认值,如果父组件不传递属性,就显示默认的值
  getDefaultProps: function() {
    return {
      hobby: '玩游戏'
    };
  },

  render: function() {
    return ( <h1>{this.props.hobby}</h1> ) //显示属性
  }
});

ReactDOM.render(
  <TestComponent hobby="编程"/>,  //传递属性
  document.getElementById('test')
);

能够看到外面传递一些数码给hobby,组件会依据传给hobby的数据展现东西,那么那么些hobby正是大家设定的TestComponent的props。

PropTypes

PropTypes是为了注解要给那天特性传什么格式的数量,这么些东西并不是强制性的,假诺传给属性的数码和设置的品质格式不相同等会并发警示,大家在原本html文件中添加上边代码

propTypes: {
    hobby: React.PropTypes.string
},

至于格式都有如何能够参见官网http://facebook.github.io/react/docs/reusable-components.html

总结:
state存款和储蓄视图的景色,修改state使用this.setState,state内在使用
props是只读属性,不要通过别的措施修改这一个props,props是外围传递数据的入口

骚年想看代码点击那里demo

事件处理

React也帮衬事件,像点击事件onClick,鼠标事件onMouseOver,onMouseOut等等事件。那中间的第三个单词是大写字母早先,骚年们多如牛毛绝不搞错了。其余事件到时候能够参照一下官网。

上边大家就贯彻一个动态的UI,看下效果

图片 1

看一下那个代码怎么落到实处的

getInitialState: function() {
  return {
    showElem: false //我们通过改变这个值来控制子视图的显示与不显示
  };
},

//处理点击事件
handleClick: function() {
    this.setState( {showElem: !this.state.showElem} );
},

render: function () {
  var elems;
  if(this.state.showElem) {
    .............
  }

  return (
    <div>
      <button onClick={this.handleClick}>点击我</button>   //绑定onClick事件
      <div> {elems} </div>
    </div>
  );
}
});

经过点击事件,我们改变了state的值,前面说过,大家得以变更state的值,可是无法改变props的值,改变了state的值,那么虚拟DOM就会变动,就会再一次改变真实突显的DOM。

骚年点击看代码

零件复合

看样子此间,是或不是深感1个组件玩来玩去很不爽,那么我们再多来几个零部件,看看组件之间是怎么构成使用的。

//创建第三个组件,为第一个组件和第二个组件的复合
var ComponentThree = React.createClass({
  render: function() {
    return (
      <div>
        <ComponentOne />
        <ComponentTwo />
      </div>
    )
  }
});

大家成立了ComponentOneComponentTwo组件,在ComponentThree组件准将他们复合到共同
是否是否粗略?未来ComponentThree正是眼下七个零件的父组件。

代码参考那里demo

到了此处你或许会认为react很简短嘛,其实本人那只是带大家不难入个门,等豪门对这一个基础概念都询问了后来,对于一些深层的研究不那么素不相识了。

好了骚年们,为了文章篇幅不是太长,那篇小说就到此甘休了。放心自身还会继续立异的。请大家连连关切哦!!!

相关文章

网站地图xml地图