菜单

React 入门教程

2019年6月12日 - www6165com

遍历循环

当大家有三个饱含对象的数组,怎样循环那些数组并渲染每二个指标到列表项中?JSX
允许你在跋扈 Javascript 文件中动用它,你能够映射那几个数组并赶回
JSX,然后利用 React 去渲染。

var navigationConfig = [
    {
        href: ”,
        text: ‘My Website’
    }
];
var Navigation = React.createClass({
    getInitialState: function () {
        return {
            openDropdown: -1
        };
    },
    getDefaultProps: function () {
        return {
            config: []
        }
    },
    propTypes: {
        config: React.PropTypes.array
    },
    render: function () {
        var config = this.props.config;
        var items = config.map(function (item) {
            return (
                <li className=”navigation__item”>
                    <a className=”navigation__link” href={
item.href }>
                        { item.text }
                    </a>
                </li>
                );
        });
        return (
            <div className=”navigation”>
                { items }
            </div>
            );
    }
});
React.render(<Navigation config={ navigationConfig } />,
document.body);

在 JSFilddle 中私行行使
navigationConfigin

导航配置由数组和对象组成,包罗贰个针对性超链接的 href 属性和2个用以展示的
text
属性。当大家映射的时候,它会四个个依次通过那个数组去获取对象。大家得以访问
href 和 text,并在 HTML
中运用。当重返列表时,那几个数组里的列表项都将被轮换,所以大家把它放入
React 中拍卖时它将明白怎么去渲染了!

propTypes

咱俩也能够任性为每二个性质钦命项目。那对于大家检查和管理属性的离奇赋值特别实惠。如上边包车型客车dropdown,我们内定唯有数组技巧放入配置。

var Navigation = React.createClass({
    getInitialState: function () {
        return {
            openDropdown: -1
        };
    },
    getDefaultProps: function () {
        return {
            config: []
        }
    },
    propTypes: {
        config: React.PropTypes.array
    },
    render: function () {
        return (
            <div className=”navigation”>
               
            </div>
            );
    }
});
 
React.render(<Navigation config={ navigationConfig } />,
document.body);

使用 JSX

如前方所说,JSX每2个零件都有四个 render
方法,那几个措施产生三个”ViewModel(视图模型)” –
在回去HTML到零部件从前,你能够将以此模型(ViewModel)的音讯放入视图中,意味着你的HTML会依靠这几个模型动态更改(举例多少个动态列表)。

一旦您成功了操作,就能够回去您想渲染(render)的东西,我们接纳JSX来做是这般轻巧
 
var ExampleComponent = React.createClass({
    render: function () {
        return (
            <div className=”navigation”>
                Hello World!
            </div>
            );
    }
});
 

假如你要在你的浏览器中运转这段代码,只会获取语法错误的提示,因为在Javascript中<和>字符要用引号包涵起来。当您在代码上运营JSX解释器,它将被转变到那样
 
var ExampleComponent = React.createClass({
    render: function () {
        return (
            React.createElement(‘div’, {className: ‘navigation’}, ‘Hello
World!’)
            );
    }
});

能够点此测试示例 –
我使用的是浏览器JSX解释器(那并不引入,但是为了JSFiddle图片 1)。

运作了!JSX解释了你使用
React.createElement 生成的具有DOM节点,生成了节点类型、参数和剧情。你能够毫无JSX,但那象征你必供给手动写
React.createElement 以外的有着DOM节点。无数例子告诉自个儿要动用JSX。

您早晚很思疑笔者怎么在DOM上使用 className 来替代 class。那是因为 class
是Javascript的保留词。当JSX解释你的代码时就能够转移那节点上的具有属性到四个对象上,但您不可能把目的当作属性!

混编

到最近地点,大家已经完毕了具有下拉列表的拓展。大家需求通晓被下来的项目是哪些,我们将运用
.children 属性去遍历大家的
navigationConfig 数组。接下来,大家能够通过循环来操作下拉的子成分条目款项。

var navigationConfig = [
    {
        href: ”,
        text: ‘My Website’,
        children: [
            {
                href:
”,
                text: ‘Angular Dirty Checking’
            },
            {
                href:
”,
                text: ‘React’
            }
        ]
    }
];
var Navigation = React.createClass({
    getInitialState: function () {
        return {
            openDropdown: -1
        };
    },
    getDefaultProps: function () {
        return {
            config: []
        }
    },
    propTypes: {
        config: React.PropTypes.array
    },
    render: function () {
        var config = this.props.config;
        var items = config.map(function (item) {
            var children, dropdown;
            if (item.children) {
                children = item.children.map(function (child) {
                    return (
                        <li
className=”navigation__dropdown__item”>
                            <a
className=”navigation__dropdown__link” href={ child.href }>
                                { child.text }
                            </a>
                        </li>
                    );
                });
                dropdown = (
                    <ul className=”navigation__dropdown”>
                        { children }
                    </ul>
                );
            }
            return (
                <li className=”navigation__item”>
                    <a className=”navigation__link” href={
item.href }>
                        { item.text }
                    </a>
                    { dropdown }
                </li>
                );
        });
        return (
            <div className=”navigation”>
                { items }
            </div>
            );
    }
});
React.render(<Navigation config={ navigationConfig } />,
document.body);

实例在这里
– 可是大家仍是能够看见下来条款,就算大家将 openDropdown 设置成为了 -壹 。

我们能够透过在组件中访问 this.state ,来推断下拉是还是不是被张开了,并且,我们可感到其增进贰个新的
css 样式 class 来显现鼠标 hover 的功能。

var navigationConfig = [
    {
        href: ”,
        text: ‘My Website’,
        children: [
            {
                href:
”,
                text: ‘Angular Dirty Checking’
            },
            {
                href:
”,
                text: ‘React’
            }
        ]
    }
];
var Navigation = React.createClass({
    getInitialState: function () {
        return {
            openDropdown: -1
        };
    },
    getDefaultProps: function () {
        return {
            config: []
        }
    },
    openDropdown: function (id) {
        this.setState({
            openDropdown: id
        });
    },
    closeDropdown: function () {
        this.setState({
            openDropdown: -1
        });
    },
    propTypes: {
        config: React.PropTypes.array
    },
    render: function () {
        var config = this.props.config;
        var items = config.map(function (item, index) {
            var children, dropdown;
            if (item.children) {
                children = item.children.map(function (child) {
                    return (
                        <li
className=”navigation__dropdown__item”>
                            <a
className=”navigation__dropdown__link” href={ child.href }>
                                { child.text }
                            </a>
                        </li>
                    );
                });
                var dropdownClass = ‘navigation__dropdown’;
                if (this.state.openDropdown === index) {
                    dropdownClass += ‘ navigation__dropdown–open’;
                }
                console.log(this.state.openDropdown, index);
                dropdown = (
                    <ul className={ dropdownClass }>
                        { children }
                    </ul>
                );
            }
            return (
                <li className=”navigation__item” onMouseOut={
this.closeDropdown } onMouseOver={ this.openDropdown.bind(this, index)
}>
                    <a className=”navigation__link” href={
item.href }>
                        { item.text }
                    </a>
                    { dropdown }
                </li>
                );
        }, this);
        return (
            <div className=”navigation”>
                { items }
            </div>
            );
    }
});
React.render(<Navigation config={ navigationConfig } />,
document.body);

 

在此间看实例 – 鼠标划过“My
Website”,下拉即会表现。

在前方,作者一度给每一种列表项加多了鼠标事件。如你所见,小编用的是 .bind (绑定)
调用,而非其它的艺术调用 –
那是因为,当用户的鼠标划出成分区域,我们并不用关爱光标在何地,全数大家需求理解的是,将下拉关闭掉,所以大家能够将它的值设置成为-1。不过,大家须求精通的是当用户鼠标划入的时候哪个成分被下拉拓展了,所以大家须求精通该参数(成分的目录)。 我们选取绑定的秘籍去调用而非轻便的经过函数(function)去调用是因为我们供给通过
React
去调用。如果大家一向调用,这咱们就要求直接调用,而不是在事变中调用他。

今昔我们能够增加许多的条条框框到 navigationConfig
当中,而且大家也得以给她加上样式到下来功效个中。查看实例.

零件方法

React
也为组件提供了更利于我们工作的法门。它们会在组件的创办进程中被调用到。例如getInitialState,能让大家定义2个私下认可的情事,那样我们不要忧虑在代码里面前遭逢事态项目是还是不是留存做越来越的自笔者评论了。

mixins

大家也足以在组件中进入 mixins。这是多个独立于 React
的基本组件(只是2个目的类型的配备)。那意味着,借使大家有八个效率看似的零件,就足以共享三个安顿了(要是先导状态同样)。我们得以抽象化地在
mixin 中确立一个办法,那样就绝不把一样的代码写上三回了。

 

var ExampleMixin = {
    componentDidMount: function () {
        // bind some event listeners here
    },
    componentWillUnmount: function () {
        // unbind those events here!
    }
};
 
var ExampleComponent = React.createClass({
    mixins: [ExampleMixin],
    render: function () {
        return (
            <div>
                Hello World!
            </div>
            );
    }
});
 
var AnotherComponent = React.createClass({
    mixins: [ExampleMixin],
    render: function () {
        return (
            <div>
                Hello World!
            </div>
            );
    }
});
 

如此任何零部件都有一样的 componentDidMount 和 component威尔Unmount
方法了,保存大家重写的代码。无论怎么着,你不可能override(覆盖)这几个属性,如若那几个特性是在mixin里设置的,它在那几个组件中是不可掩盖的。

getDefaultProps

当大家创造组件时,能够依据大家的主见为组件的性质定义暗中同意值。这意味我们在调用组件时,要是给那个属性设置值,组件会有叁个私下认可的“配置”,而小编辈就绝不操心在下1行代码中检查属性那类事情了。

当你定义了组件时,这几个私下认可的性质会被缓存起来,因此针对种种组件的实例它们都以同样的,并且不可能被转移。对于导航组件,大家将配备钦赐为二个空的数组,因此固然未有传来配置,render
方法内也不会时有产生错误。

var Navigation = React.createClass({
    getInitialState: function () {
        return {
            openDropdown: -1
        };
    },
    getDefaultProps: function () {
        return {
            config: []
        }
    },
    render: function () {
        return (
            <div className=”navigation”>
               
            </div>
            );
    }
});
 
React.render(<Navigation config={ navigationConfig } />,
document.body);

属性

基于我们后面“Hello World!”的例证,大家在 HTML 节点上有 className
的属性。在组件内部,大家得以行使 this.props.classname
访问这几个值,但正如前方所述,你能够传递任何你欣赏的内容。对我们的下拉来讲,大家供给将导航配置为对象,组件将使用它看做要渲染的安顿。让大家起先吧—

var navigationConfig = [];
 
var Navigation = React.createClass({
    render: function () {
        return (
            <div className=”navigation”>
               
            </div>
            );
    }
});
 
React.render(<Navigation config={ navigationConfig } />,
document.body);

万1未来能访问 this.props.config
的话,大家会遭到二个空数组(navigationConfig
的值)。在大家进入到实在导航的编码前先让我们作证一下情状。

状态

如以前所商议的,每3个零件都有其和好的”状态”。当要动用意况时,你要定义早先状态,让后才方可运用
this.setState 来更新境况。无论什么日期状态获得了翻新,组件都会再一回调用
render 函数,拿新的值去替换大概转移从前渲染的值。那正是杜撰 DOM 的奥义 –
总括差别的算法实在 React 内部造成的,因而大家不用去以来 DOM
的翻新了(因为 DOM 不快)。React 会总括出差别并发生一批指令的集合(例如,加入向”navigation__link“插手”active“类,或然移除二个节点),并在
DOM 上实行它们。

运用导航,大家将下拉菜单张开保持在气象中。为此,增多三个 getInitialState
函数到类配置对象上,并重临带有我们想要的起首状态的目的。

var navigationConfig = [];
 
var Navigation = React.createClass({
    getInitialState: function () {
        return {
            openDropdown: -1
        };
    },
    render: function () {
        return (
            <div className=”navigation”>
               
            </div>
            );
    }
});
 
React.render(<Navigation config={ navigationConfig } />,
document.body);

你会发觉咱们将其设置成了-一。当大家策动去开采三个下拉菜单时,将采取状态之中的安排数组中的导航项的职责,而由于数组索引起初于0,大家就得使用
-壹 来表示还未曾对准2个导航项。

大家得以行使 this.state 来访问状态,因而壹旦大家去观看atthis.state.openDropdown,应该会有 -1 被再次来到。

组件的生命周期

各样组件都有其“生命周期”—那是一体系你能够在组件配置里定义的函数,它们将在部件生命周期内被调用。我们早就看过了
getinitialstate 一它只被调用一回,在组件被挂载时调用。

React 是 推特 里一堆牛 X 的码农折腾出的牛X的框架。 实现了两个虚构
DOM,用 DOM 的章程将索要的机件秒加,用不着的秒删。React 扮演着 MVC
结构中 V 的剧中人物, 可是你假若 Flux 搭配使用, 你就有2个很牛X的能让轻便让
M 和 V 同步的框架了,Flux 的事过后再说~

总结

React 是多个精简方便易用而又有力的框架。它简洁的
API,能够令人神速的创办和睦的机件,而不去理会复杂的 dom
也不用做某个特别担当的操作,非常是在重复的列表项等方面表现不错。有任何难点,想和笔者约,请关怀自个儿的
twitter @rynclark。多谢阅读。

英文原稿:Getting started with
React

本文永恒更新链接地址:http://www.linuxidc.com/Linux/2015-06/118961.htm

图片 2

componentWillMount

当组件要被挂载时那么些函数被调用。那表示大家得以在此运行组件功效必须的代码。为由于
render
在组件生命周期里被一再调用,大家一般会把只须要实行一回的代码放在这里,例如XH大切诺基 请求。

var ExampleComponent = React.createClass({
    componentWillMount: function () {
        // xhr request here to get data
    },
    render: function () {
        // this gets called many times in a components life
        return (
            <div>
                Hello World!
            </div>
            );
    }
});

componentDidMount

万1你的零件已经运营了 render 函数,并实际中将零件渲染到了 DOM
中,componentDidMount 就能被调用。大家得以在此刻做其余索要做的 DOM
操作,已经其它部供给要借助于组件已经实际存在于 DOM 之后技艺做的专门的学问,
举个例子渲染二个图片。你能够透过调用 this.getDOMNode ���内部访问到 DOM
节点。

var ExampleComponent = React.createClass({
    componentDidMount: function () {
        var node = this.getDOMNode();
        // render a chart on the DOM node
    },
    render: function () {
        return (
            <div>
                Hello World!
            </div>
            );
    }
});

componentWillUnmount

假使您准备吧组件从 DOM
移除时,那几个函数将会被调用。那让我们得以在组件背后实行清理,比方移除任何大家已经绑定的轩然大波监听器。假设我们一贯不在自己背后做清理,而当当中三个风波被触发时,就能够尝试去总结二个不曾载入的零部件,React
就能够抛出3个错误。

var ExampleComponent = React.createClass({
    componentWillUnmount: function () {
        // unbind any event listeners specific to this component
    },
    render: function () {
        return (
            <div>
                Hello World!
            </div>
            );
    }
});

起来的渲染器

当你最起首要渲染二个React组件时,你要求告诉React是要渲染什么组件,还要制定一个存活的DOM节点以表示在何处渲染这些组件.
为此你会要使用React.render函数.

var ExampleComponent = React.createClass({
render: function () {
    return (
        <div className=”navigation”>
            Hello World!
        </div>
        );
}
});
React.render(<ExampleContent />, document.body);
 
她将会在body节点上渲染组件——轻易吗!
从此你就足以像日常那样调用别的的组件了,
或然1旦您愿意的话,能够选用render函数许多次,
借令你不想使用React来渲染整个页面,但依然想要使用七个组件.

将变量用在性质上

借令你想动态改动组件的样式类(大概其余其余的属性值),你能够行使变量.
可是你无法只是传进去一个变量名称,你还要将其用一对大括弧包起来,
那样JSX就能够明了那是叁个外部的变量了.

var ExampleComponent = React.createClass({
render: function () {
    var navigationClass = ‘navigation’;
    return (
        <div className={ navigationClass }>
            Hello World!
        </div>
        );
}
});

您可以在那时候来看这么些功能.

一个零部件的底子

组件能够具有其和好的“状态”。这使大家可以再度数次应用同样的零部件但却让它们看起来完全分裂,因为各样组件实例的气象是独步天下的。

当你通过传递属性到3个零部件时那一个被叫做属性。不要只局限于 HTML
属性,你能够传递任何你想传递的东西,并在组件内经过 this.props
访问它。那样使得我们能够重复使用一样的零部件但传递1组差异的性质,举个例子组件的“配置”。

组件们

在 React 中,你能够创立叁个有分外功能的零部件,那在 HTML
成分里你是打着灯笼也找不到的,比方那么些科目里的下拉领航。每种组件都有和好的势力范围(scope),所以我们定义三个零件后得以频仍的用反复的用,根本就不要求和其余组件交互!

各个组件都有二个效用叫 render , 它能够极快的回到要射到浏览器上
HTML。大家也能够调用 React 的别样零件,这表示那一入 React
深似海,哦,不对,是唯有想不到,未有做不到。

JSX

一经你常常注意React你恐怕会开掘有个东西叫JSX。JSX允许大家在Javascript中写HTML,而不是用HTML包括Javascript。它能支持大家快捷支付,因为大家绝不操心字符串和换行等。你能够在浏览器中运作JSX,然则不引入,因为那样会放慢你的页面速度。gulp和grunt为您的预管理职责提供了2个JSX解释器,所以如若你想使用JSX,作者提议拉开这一个功用。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图