（React启蒙）初探React

初探React

本文翻译自Cody Lindley的《React Enlightenmen》,已获得作者授权，这套书比较基础，看完以后能让你对React有一定的认识。本文是本书的第一章，主要是以一个浅显的例子引出究竟该如何理解React并且简要的介绍了React的几大要素，适合对React感兴趣，但是一直没真的去了解这个工具的童鞋阅读。

React是一个非常好的工具，基于它可以编写更加容易理解的JavaScript代码，构建并维护无状态或富状态组件。使用它可以通过React nodes划分整体的UI为一个个UI组件（React 组件），React nodes在形式上和HTML nodes很类似，通过渲染，它可以表现为多种形式（HTML/DOM,canvas,svg等等）。

上面这句话可能还不能很清晰的表达出React到底是什么，但是如果通过一个React实例来说明，那你一定能更加容易明白了，本章将为你展示React和React Component，如果在阅读过程中遇到不明白的地方，也不要着急，本书后面的章节会详细解释这些细节。

从我们熟悉的HTML标签标签有点React组件的味道，我们就从它开始学习React。

以下是一个有几个子元素的

浏览器渲染上面的元素树时会产生一个包含一系列项目的文字列表.

在JSFiddle中查看详情

此时浏览器，DOM，shadowDOM一起把是下拉列表，当用户点击其内的某一选项时，该选项会被选中，之所以被选中，是因为选中的状态被存储了（比如说，当你点击“Volvo”时，这个会被选中，而"Mercedes"的选中状态会被取消）。

使用React，我们可以做类似的事情，不过此时我们是使用React nodes 构成React组件，当然最终渲染后其还是被转化为了HTML DOM中的HTMl 元素。

下面我们使用React来模仿标签的功能，我们需要在为其添加state。毕竟保存选中某子元素的状态，是函数。添加事件的方法类似于你在真实DOM中添加事件的方法，React考虑到了你的使用习惯。


var MySelect = React.createClass({

    getInitialState: function(){

        return {selected: false};

    },

    select:function(event){

        if(event.target.textContent === this.state.selected){

            this.setState({selected: false});

        }else{

            this.setState({selected: event.target.textContent});

        }   

    },

    render: function(){

        var mySelectStyle = {

            border: '1px solid #999',

            display: 'inline-block',

            padding: '5px'

        };

        return (//使用props把函数当做参数传递给 

            

                

                

                

                

            

        );

    }

});

var MyOption = React.createClass({

    render: function(){//add event handler that will invoke select callback

        return {this.props.value};

    }

});

ReactDOM.render(, document.getElementById('app'));

现在，我们已经可以通过点击某一个组件达到选中该组件的效果了。我们来想想，点击的过程发生了什么，当你点击某一个时，select函数会被触发，并且设定了组件中state的值，不过遗憾的是，现在我们的点击并没有明显的反馈，接下来让我们加上反馈。

我想达到的效果是，当我们把当前状态传递给组件，可以得到视觉上的反馈，让我们知道组件的state改变了。

再次使用props,这次我们将把selected状态通过父组件传递给子组件，我们通过在父组件中的所有上设置state={this.state.selected}来达到这个效果，观察代码我们知道如果

this.props.state和当前值this.props.value匹配,该子组件就会被选中。如果被选中，给该子组件添加selectedStyle类名，如果没选中，则添加unSelectedStyle类名。

点击在JSFiddle中查看

点击上面的例子，我们可以看到设置已经生效了。

虽然我们的React Select组件还没有完完全全的实现HTML