初識React

標籤：

原文地址：北雲軟體-初識React

專註於UI

在MVC分層設計模式中，react常被拿來實現視圖層(V)。
React不依賴於技術棧的其他部分，因此可以方便的在現有項目中嘗試用它來實現一個小特性。

虛擬DOM

React從DOM中抽象出來，給出一種更簡潔的編程模型，且效能表現更好。能夠通過NodeJS實現服務端渲染，通過React Native開發原生app。

資料流
React實現單向、響應式資料流，減少boilerplate且比傳統資料繫結更容易理解。

簡潔的組件
React的組件都實現了一個render()方法，它接收輸入的資料並返回要顯示的內容。這個例子中我們使用JSX(類XML文法)來編寫代碼。render()方法通過this.props屬性來訪問輸入的資料。

React並不強制要求開發人員使用JSX。在“編譯的JS”中可以查看JSX產生的原始Javascript代碼。

// JSX codevar HelloMessage = React.createClass({    render: function() {        return <div>Hello {this.props.name}</div>;    }});React.render(<HelloMessage name="John" />, mountNode); // compiled javascript codevar HelloMessage = React.createClass({displayName: "HelloMessage",    render: function() {        return React.createElement("div", null, "Hello ", this.props.name);    }});React.render(React.createElement(HelloMessage, {name: "John"}), mountNode);

帶狀態的組件

除了可以通過this.props訪問輸入資料之外，組件還可以通過this.state來維持他的內部狀態資料。當一個組件的狀態資料改變時，組件將重新調用render()方法來重繪。

// JSX codevar Timer = React.createClass({    getInitialState: function() {        return {secondsElapsed: 0};    },    tick: function() {        this.setState({secondsElapsed: this.state.secondsElapsed + 1});    },    componentDidMount: function() {        this.interval = setInterval(this.tick, 1000);    },    componentWillUnmount: function() {        clearInterval(this.interval);    },    render: function() {        return (            <div>Seconds Elapsed: {this.state.secondsElapsed}</div>        );    }});React.render(<Timer />, mountNode); // compiled javascript codevar Timer = React.createClass({displayName: "Timer",    getInitialState: function() {        return {secondsElapsed: 0};    },    tick: function() {        this.setState({secondsElapsed: this.state.secondsElapsed + 1});    },    componentDidMount: function() {        this.interval = setInterval(this.tick, 1000);    },    componentWillUnmount: function() {        clearInterval(this.interval);    },    render: function() {        return (            React.createElement("div", null, "Seconds Elapsed: ", this.state.secondsElapsed)        );    }});React.render(React.createElement(Timer, null), mountNode);

React應用

結合使用屬性(props)和狀態(state)，可以構建一個基礎的代辦事項應用。這個例子中使用狀態來跟蹤事項列表和使用者輸入的新事項名稱，即使事件處理常式看起來是內聯的，他們仍將會通過代理被收集和實現。

// JSX codevar TodoList = React.createClass({    render: function() {        var createItem = function(itemText, index) {            return <li key={index + itemText}>{itemText}</li>;        };        return <ul>{this.props.items.map(createItem)}</ul>;    }});var TodoApp = React.createClass({    getInitialState: function() {        return {items: [], text: ‘‘};    },    onChange: function(e) {        this.setState({text: e.target.value});    },    handleSubmit: function(e) {        e.preventDefault();        var nextItems = this.state.items.concat([this.state.text]);        var nextText = ‘‘;        this.setState({items: nextItems, text: nextText});    },    render: function() {        return (            <div>                <h3>TODO</h3>                <TodoList items={this.state.items} />                <form onSubmit={this.handleSubmit}>                    <input onChange={this.onChange} value={this.state.text} />                    <button>{‘Add #‘ + (this.state.items.length + 1)}</button>                </form>            </div>        );    }});React.render(<TodoApp />, mountNode); // compiled javascript codevar TodoList = React.createClass({displayName: "TodoList",    render: function() {        var createItem = function(itemText, index) {            return React.createElement("li", {key: index + itemText}, itemText);        };        return React.createElement("ul", null, this.props.items.map(createItem));    }}); var TodoApp = React.createClass({displayName: "TodoApp",    getInitialState: function() {        return {items: [], text: ‘‘};    },    onChange: function(e) {        this.setState({text: e.target.value});    },    handleSubmit: function(e) {        e.preventDefault();        var nextItems = this.state.items.concat([this.state.text]);        var nextText = ‘‘;        this.setState({items: nextItems, text: nextText});    },    render: function() {        return (            React.createElement("div", null,                React.createElement("h3", null, "TODO"),                React.createElement(TodoList, {items: this.state.items}),                React.createElement("form", {onSubmit: this.handleSubmit},                    React.createElement("input", {onChange: this.onChange, value: this.state.text}),                    React.createElement("button", null, ‘Add #‘ + (this.state.items.length + 1))                )            )        );    }});React.render(React.createElement(TodoApp, null), mountNode);

組件可以使用第三方外掛程式

React非常靈活，通過鉤子允許與其他的庫和架構對接。這個例子使用外部的Markdown庫來即時轉化文本域中的內容。

 

// JSX codevar MarkdownEditor = React.createClass({    getInitialState: function() {        return {value: ‘Type some *markdown* here!‘};    },    handleChange: function() {        this.setState({value: React.findDOMNode(this.refs.textarea).value});    },    render: function() {        return (            <div className="MarkdownEditor">                <h3>Input</h3>                <textarea onChange={this.handleChange} ref="textarea" defaultValue={this.state.value} />                <h3>Output</h3>                <div className="content" dangerouslySetInnerHTML={{                    __html: marked(this.state.value, {sanitize: true})                }}/>            </div>        );    }});React.render(<MarkdownEditor />, mountNode); // compiled javascript codevar MarkdownEditor = React.createClass({displayName: "MarkdownEditor",    getInitialState: function() {        return {value: ‘Type some *markdown* here!‘};    },    handleChange: function() {        this.setState({value: React.findDOMNode(this.refs.textarea).value});    },    render: function() {        return (            React.createElement("div", {className: "MarkdownEditor"},                React.createElement("h3", null, "Input"),                React.createElement("textarea", {                    onChange: this.handleChange,                    ref: "textarea",                    defaultValue: this.state.value                }),                React.createElement("h3", null, "Output"),                React.createElement("div", {                    className: "content",                    dangerouslySetInnerHTML: {                        __html: marked(this.state.value, {sanitize: true})                    }                })            )        );    }});React.render(React.createElement(MarkdownEditor, null), mountNode);

 

初識React