Reactjs疾速上手

2024年5月19日 69次阅读 来源: yuhualingfeng

React简述

React是由fackbook开放的一个构建用户接口的javascript类库,其重要目标是为了开辟随时间数据不停变化的大型应用顺序,很多开辟者将React视作为MVC形式中的V.2011年React最先被fackbook工程师动手开辟,并作为内部应用,2013年正式开源,进修react须要控制肯定的JavaScript基础。

React的上风

  • 交互式开辟 ：当有数据发作变化时，界面会发作响应的变化.

  • 组件为开辟单位：React是由组件作为开辟单位的,一个组件能够包括一个或多个其他组件.

  • 能够在多个平台中应用: React除了能够在webapp中应用,还能够借助React Native将其应用到IOS和Android应用顺序.

开辟前的预备

开辟React顺序须要引入必要的文件,下面是一个React顺序的基础构架:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React</title>
    <script src='//cdn.bootcss.com/react/0.14.3/react.js'></script>
    <script src='//cdn.bootcss.com/react/0.14.3/react-dom.js'></script>
    <script src='https://npmcdn.com/babel-core@5.8.38/browser.min.js'></script>
</head>
<body>
</body>
</html>

这里我们引入了三个文件,这几个文件我都是经由过程bower举行装置的,首先是react.js,这个重要包括了React的相干要领的定义.react-dom.js是将我们定义的组件插进去到html文档中.browser.min.js这个文件的作用是将具有JSX语法的代码转换为JavaScript代码,如果我们应用的是JavaScript编写代码则这个文件能够不援用.固然你能够先应用JSX编写，然后经由过程react-tools举行离线转换.

一个小Demo

这里先给人人列出一个小的例子,让人人先尝尝鲜.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Search Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src='//cdn.bootcss.com/react/0.14.3/react.js'></script>
    <script src='//cdn.bootcss.com/react/0.14.3/react-dom.js'></script>
    <script src='https://npmcdn.com/babel-core@5.8.38/browser.min.js'></script>
    <style>
        div{text-align: center;font:normal 20px/50px microsoft yahei;}
        input{width:80%;border-radius: 4px;border:solid;text-align: center;height: 30px;}
    </style>
</head>
<body>
<div id="container"></div>
<script type="text/babel">
    
var SearchInput = React.createClass({
    handerChange: function(){
        this.props.setName(this.refs.seachbox.value);
    },
    render: function(){
        return (
            <div>
                <input type='text' ref = 'seachbox' onChange={this.handerChange}/>
            </div>
        );
    }
});

var List = React.createClass({
    render:function(){
    var lists = this.props.lists;
    var filterWord = this.props.filterWord;
    var rows = [];
    lists.forEach(function(list){
        if(list.toLowerCase().indexOf(filterWord.toLowerCase())!=-1){
            rows.push(<div>{list}</div>);
        } 
        
    }.bind(this));
        return (
            <div>{rows}</div>
        );
    }
});    

var SearchBox = React.createClass({
    getInitialState: function(){
        return {
        filterWord:''
        };
    },
    setName: function(filterWord){
    this.setState({filterWord:filterWord});
    },
    render: function(){
        return (
            <div>
                <SearchInput setName = {this.setName}/>
                <List filterWord = {this.state.filterWord} lists = {this.props.lists}/>
            </div>
        );
    }
});

var lists = ['Jack','Wason','Marray','Lucy','Jummy','Herry','Bob'];
ReactDOM.render(<SearchBox lists= {lists}/>,document.getElementById('container'));        
</script>
</body>
</html>

这是一个简朴的搜刮功用的完成,以上代码能够直接放在html文件中运转.这里我们一共定义了三个组件,分别是SearchInput List SearchBox,这里有一点须要提醒人人:组件名的首字母必需大写.SearchInput和 List作为SearchBox的子组件,我们建立组件是应用的React.createClass要领,并经由过程ReactDOM.render将组件添加到html文档中.

这内里另有两个比较特别的值this.props和this.state.这两个的区分在于this.props在载入后不会发作转变,而this.state能够经由过程被设置从而致使响应的变化.

React API

React API定义了两个对象React和ReactDOM.

React对象

React.Component

React.Component是在ES6语法下定义组件应用到的，以下:

class HelloMessage extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

React.createClass

React.createClass要领也是用于定义一个组件,其参数为一个对象，这个对象必需包括render要领,render要领返回一个元素,比方div.这个元素下能够包括恣意个html标签或许React组件.

var Component  = React.createClass({
    render:function(){
        return (
        <div>Hello World!!!</div>
        );
    }
);

传入这个要领的对象中能够自定义属性,固然另有一些具有特别意义的属性,详细以下:

  • render：返回须要展现的组件元素

  • getInitialState：返回值作为this.state的初始值.

  • getDefaultProps：返回值作为this.props的值,其优先级低于直接经由过程挪用该组件时设置的值.

  • propTypes:对this.props中的值做数据范例考证，平常作为开辟调试应用,详细的范例请点击检察

  • mixins:传入此属性的值为一个对象，这个对象中的属性或要领将会被扩大到此组件中,它存在的意义是为了复用.

  • statics:传入此属性的值为一个对象，这个对象中的属性或要领将会被扩大到此组件类中

var MyComponent = React.createClass({
  statics: {
    customMethod: function(foo) {
      return foo === 'bar';
    }
  },
  render: function() {
  }
});

MyComponent.customMethod('bar');  // true

  • displayName:当开辟调试时在控制台中应用到的组件名.

  • componentWillMount:组件将要被加载时触发此要领

  • componentDidMount:组件加载胜利后触发此要领

  • componentWillReceiveProps:当this.props值发作变化时触发此要领,但初始化组件时不会触发。

  • shouldComponentUpdate：当this.props或this.state的值发作变化时触发，并经由过程返回值肯定是不是触发更新事宜.但初始化组件时不会触发。

  • componentWillUpdate：组件行将更新时触发此要领.

  • componentDidUpdate：组件行将更新完成后触发此要领.

  • componentWillUnmount：组件行将被卸载时触发此要领.

React.createElement

建立一个新的React元素

React.createElement(string/ReactClass Type,[props],[childrens...]);

第一个参数是建立的元素,能够是html标签,也能够是自定义的React组件;第二参数是一个对象,其作为this.props的初始值;第三个及背面的参数为此元素的子元素.

ReactDOM.render(
    React.createElement("div", null, 
            React.createElement(SearchInput, {setName: this.setName}), 
            React.createElement(List, {filterWord: this.state.filterWord,                lists: this.props.lists})
        ),doucment.getElementById('container'));

React.cloneElement

复制一个React元素,同时兼并其props和子元素.

React.cloneElement(ReactClass Type,[props],[childrens...]);

React.createFactory

返回一个天生指定范例 ReactElements 的函数

React.isValidElement

推断一个对象是不是为有用的React元素.

var ele = React.createElement('div');
React.isValidElement(ele);  // ture

React.DOM

React.DOM 应用 React.createElement 为 DOM 组件供应了轻易的包装。该体式格局仅在未应用 JSX 的时刻实用。比方，React.DOM.div(null, 'Hello World!')，这里封装了一个div DOM组件。

React.PropTypes

此对象是为组件的this.props的考证做预备的.

React.createClass({
    propTypes:{
        name:React.PropTypes.string,
        age:React.PropTypes.number
    }
    ...
});

这里是希冀this.props.name的值范例为String,this.props.age的值范例为Number.

React.Children

此对象可对this.props.children举行数据处理.

React.Children.map(object children, function fn [, object thisArg])

React.Children.forEach(object children, function fn [, object thisArg])

React.Children.count(object children)

React.Children.only(object children)

React.Children.toArray(object children)

ReactDOM对象

ReactDOM.render

ReactDOM.render是将定义的组件衬着到DOM元素中.

ReactDOM.render(<Comment/>,document.getElementById('container'));

ReactDOM.unmountComponentAtNode

ReactDOM.unmountComponentAtNode是将已衬着的React组件从DOM元素中移除.

ReactDOM.unmountComponentAtNode(document.geElementById('container'));

ReactDOM.findDOMNode·

当组件加载胜利返回衬着的DOM元素.

DOMElement findDOMNode(ReactComponent component)
    原文作者：yuhualingfeng
    原文地址: https://segmentfault.com/a/1190000006172643
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞