React基础,帮你快速学习React

概况

学完这篇博文,你可以对React,这个著名的脸书的库有一定程度的理解,并能开始实践。再完成后续的学习之后你可以掌握React。在正式开始以前,先了解一些相关的概念。

什么是React?

React是一个脸书开发的UI库。使用这个库可以很方便的开发交互式的、具有表达力的和可重用的UI组件。并且这个库已经在脸书和instagram.com的产品中使用。

这个库的另外一个独特的卖点是:他不仅可以使用在客户端,还可以用在Server端渲染。

这个库还使用了一种叫做虚拟DOM(Virtual DOM)的概念,这些DOM可以根据状态有选择的渲染。这样,页面就会尽量的减少DOM操作而达到保持页面状态的效果。

虚拟DOM是如何工作的

想象一下你根据一个人造了一个模特,这个模特几乎有这个人的全部属性,并且有这个人的所有当前状态。这基本上就是React的虚拟DOM做的。

现在假设你对这个人形模特做了某些修改。比如,加了胡子、强壮的二头肌。在React的世界里,当大家做了这些修改,会发生两件事:第一、运行“对比”算法找出发生的改变。第二、调整,根据第一步找出的不同实行必要的DOM操作。

React工作的方式不是把真人拿来从头到尾的来一次“整形”,而是只修改脸(帖胡子)和胳膊(二头肌)。也就是如果你在input里加了文字,之后开始渲染操作里,如果input的父节点没有开始上文第二步的“调整”操作,那么input里的文字是不会动的。

因为React使用的是假的DOM不是真的,这也给了React一个新的可能。大家可以在Server端渲染这些假DOM。

现在开始

开始React之旅非常简单,主要下载脸书提供的开始示例:

React入门示例

你也可以用他们提供的JSFiddle:

React JSFiddle

建立页面

稍后使用的练习页面需要包括react.jsreact-dom.js

<!DOCTYPE html>
<html>
    <head>
    </head>

    <body>
        <div id='mount-point'>

        </div>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>

        <script type="text/babel">

        </script>
    </body>
</html>

react-dom是最近发布的React的支撑库。react-dom本来是react.js的一部分,后来作为单独的库发布。

在React里,一个组件就是一个元素,所以在本例中大家可以使用mount-pointdiv作为父容器。

本例只是作为入门时使用的,在实际的开发中最好是把创建的组件都放在一个单独的文件中。

基本内容

React的基本创建单元叫做组件,例如:

    <script type="text/babel">
        ReactDOM.render(
            <h1>Hello, World!</h1>, 
            document.getElementById('mount-point') 
        );
    </script>

如果你从没见过这样的写法,你会以为javascript/HTML又有什么新的魔法了。

JSX

其实这是JSX,是一个javascript的XML变体。使用JSX可以在javascript里写出HTML式的标签。

在JSX里,HTML的class属性写成classNamefor属性写成htmlFor,因为class, for都是javascript的关键字。更多不同的内容可以在这里看到。

你也可以不使用JSX,这是一个不用JSX的例子:

    ReactDOM.render(
        React.createElement('h1', null, 'Hello!'),
        document.getElementById('content')
    );

组件

使用ReactDOM的render方法的时候,第一个参数是需要渲染的大家创建的组件,第二个是HTML的DOM节点,组件渲染之后在这里添加。大家可以使用createClass方法创建组件。创建组件方法只需要一个对象作为参数。大家来创建一个:

    var MyComponent = React.createClass({
        render: function(){
            return (
                <h1>Hello, world!</h1>
            );
        }
    });

组件创建好之后就可以在文档里渲染出来了:

    ReactDOM.render(
        <MyComponent />,
        document.getElementById('mount-point')
    );

很酷吧!?

进阶

创建组件的时候,大家可以给组件添加一些属性。这些属性都存放在props。这些属性可以通过this.props在组件内部访问,也可以在render方法渲染的时候使用。

    var MyComponent = React.createClass({
        render: function(){
            return (
                <h1>Hello, {this.props.name}!</h1>
            );
        }
    });
    
    ReactDOM.render(
        <MyComponent name="handsome" />,
        document.getElementById('mount-point')
    );

生命周期和状态

render方法是创建组件的唯一方法,另外还有一些生命周期相关的方法可以使用。

生命周期方法

  • componentWillMount 在渲染之前调用一次。
  • componentDidMount 在渲染之后调用一次。
  • shouldComponentUpdate 返回值决定组件是否需要update。
  • componentWillUnmount 在卸载组件之前调用。

状态(State)

在开始State之前,需要了解一些相关基础:

  • getInitialState返回State的初始值。
  • getDefaultProps获取props的初始值。
  • mixins一组对象,主要用来扩展当前组件的功能。

更多相关的的内容可以看这里。

每一个组件都包含一个state对象和一个props对象。State(状态)用setState方法设置。调用setState方法会触发UI的更新,也是实现交互式开发的必要基础。如果大家要在一开始设定初始状态(initial state),可以调用getInitialState方法。代码:

    var MyComponent = React.createClass({
        getInitialState:function(){
            return {
                count: 5
            };
        },
        render: function(){
            return (
                <h1>Hello, {this.state.count}!</h1>
            );
        }
    });

事件

React包含一个跨浏览器的事件系统。这些事件作为属性包含在组件中。代码:

    var Counter = React.createClass({
        incrementCount: function(){
            this.setState({
                count: this.state.count + 1
            });
        },
        getInitialState: function(){
            return {
                count: 0
            }
        },
        render: function(){
            return (
                <div class="my-component">
                    <h1>Count: {this.state.count}</h1>
                    <button type="button" onClick={this.incrementCount}>Increment</button>
                </div>
            );
        }
    });
    
    ReactDOM.render(
        <Counter />,
        document.getElementById('mount-point')
    );

单向数据流

在Rect里,数据通过stateprops单向流动,这和Angular的双向流动不同。也就是说,在一个多组件结构里,一个父组件需要负责管理状态(state)并把数据通过props向下发放。

组件的状态应该用setState方法更新,这样可以确保UI会同时刷新。数据通过设置子组件的属性来传递给子组件。子组件可以通过this.props来获取这些数据。代码:

var FilteredList = React.createClass({
    filterList: function(event){
        var updatedList = this.state.initialItems;
        updatedList = updatedList.filter(function(item){
            return item.toLowerCase().search(
            event.target.value.toLowerCase()) !== -1;
        });
        this.setState({items: updatedList});
    },
    getInitialState: function(){
        return {
            initialItems: [
                "Apples",
                "Broccoli",
                "Chicken",
                "Duck",
                "Eggs",
                "Fish",
                "Granola",
                "Hash Browns"
            ],
            items: []
        }
    },
    componentWillMount: function(){
        this.setState({items: this.state.initialItems})
    },
    render: function(){
        return (
            <div className="filter-list">
                <input type="text" placeholder="Search" onChange={this.filterList}/>
                <List items={this.state.items}/>
            </div>
        );
    }
});

var List = React.createClass({
    render: function(){
        return (
            <ul>
                {
                    this.props.items.map(function(item) {
                    return <li key={item}>{item}</li>
                })
            }
        </ul>
        )  
    }
});

ReactDOM.render(<FilteredList/>, document.getElementById('mount-point'));

结语

现在大家已经把React的基础都学会了,花点时间看看React API和JSX。

原文地址:https://scotch.io/tutorials/learning-react-getting-started-and-concepts

Stay tuned to my next episode

推荐阅读更多精彩内容

  • 本笔记基于React官方文档,当前React版本号为15.4.0。 1. 安装 1.1 尝试 开始之前可以先去co...
    Awey阅读 6,123评论 19赞 128
  • 深入JSX date:20170412笔记原文其实JSX是React.createElement(componen...
    gaoer1938阅读 5,317评论 2赞 33
  • 最近看了一本关于学习方法论的书,强调了记笔记和坚持的重要性。这几天也刚好在学习React,所以我打算每天坚持一篇R...
    gaoer1938阅读 949评论 0赞 5
  • GUIDS 第一章 为什么使用React? React 一个提供了用户接口的JavaScript库。 诞生于Fac...
    jplyue阅读 2,607评论 1赞 11
  • 所有人都吃过甜甜圈,它是一种圆形空心面包,外表特别惹人喜爱尤其受女生的喜爱。《小狗钱钱》一书中提到了一个有关“甜甜...
    无尾熊自成长阅读 90评论 0赞 1