多个组件的小反应应用程序

Question

因此，我第一次尝试做出反应，我相信会有大量的非编码意识，这是从智能用户的评论中学到更多东西的主要原因。

编码风格是否适合ES6 & React的新版本？

在使用es6、babel..etc技术的页面中

演示：http://plnkr.co/edit/5M7sCF9B3dQJZ06SbMfT

app.js

import React from 'react';
import {render} from 'react-dom';

import { Filter } from './components/Filter';
import { Properties } from './components/Properties';

import data from './data';

class App extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            searchText: ''
        };
    }
    searchUpdate(value){
        this.setState({
            searchText: value
        });
    }

    render() {
        return (
            <div className="app-wrap">
                <Header/>
                <Filter
                    searchText={this.state.searchText}
                    searchUpdate={this.searchUpdate.bind(this)}
                />
                <Properties
                    data={data}
                    searchText={this.state.searchText}
                />
                <footer>
                    <div className="container">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
                </footer>
            </div>
        );
    }
}

render(<App />, window.document.getElementById('myapp'));

以下是web应用程序中的位置，用户可以搜索特定项目以获得结果。

Filter.js

import React from 'react';

export class Filter extends React.Component {

    searchUpdate(){
        const val = this.searchValue.value;
        this.props.searchUpdate(val);
    }

    render () {
        return(
            <nav className="filter">
                <div className="container">
                    <form>
                        <input
                            type="search"
                            className="filter-input"
                            placeholder="Search property..."
                            ref={ (value) => this.searchValue = value}
                            onChange={this.searchUpdate.bind(this)}
                        />
                    </form>
                </div>
            </nav>
        );
    }
}

在这里，JSON结果显示了基于搜索的搜索

Properties.js

import React from 'react';

export class Properties extends React.Component {
    render () {
        const { data, searchText } = this.props;
        const offersList = data
            .filter(offerDetail => {
                return offerDetail.city.toLowerCase().indexOf(searchText.toLowerCase()) >= 0;
            })
            .map(offerDetail => {
                return (
                    <div className="offer" key={offerDetail.id}>
                        <h2 className="offer-title">{offerDetail.title}</h2>
                        <p className="offer-location"><i className="location-icon"></i> {offerDetail.city}</p>
                    </div>
                );
            });
        return (
            <main>
                <div className="container">
                    { offersList.length ? offersList : <h3 className='no-result'>Oops, we currently do not have any places that match your search.</h3>}
                </div>
            </main>
        );
    }
}

这个虚拟数据是很少的，但是实际的数据真的很重，包含了大量的细节。这里只展示了其中的几个供复习之用。data.js

export default [
  {
    "id": "7XHFQ63X",
    "title": "Lovely Apartment in Prenzlauer Berg",
    "city": "London"
  },
  {
    "id": "27DCP7BP",
    "title": "Elegant Flat near Alfama",
    "city": "Manchester"
  },
  {
    "id": "B4ECHV3B",
    "title": "Chic & Charming Lisboa - The most perfect view ",
    "city": "London"
  },
]

Answer 1

因此，您必须记住的是: 1.组件可能呈现或计算的单个责任原则。或者，不是，还有。从Properties.js中提取所有逻辑。这还使您能够测试数据的呈现，并将数据过滤为单独的实体。

1. 依赖注入在App中有concreted数据。因此，您不能用不同的数据测试您的应用程序，或者每次只需要提供大量和完整的数据。将数据作为支柱传递给应用程序。

 render(<App data={data} />, window.document.getElementById('myapp'));

1. 内存和CPU浪费。不应在render方法中执行任何分配。
   • 在渲染中没有逻辑。
   • 在渲染中没有绑定。
   • 等等，通常您可以在构造函数中绑定回调，或者使用更现代的语法：

    class App extends React.Component {
       ....
        searchUpdate = (value) => { // <-- arrow function will `keep` this by hidden magic (babel :P )
            this.setState({
                searchText: value
            });
        }
       ...
    }

1. 了解DOM/React。您可以删除searchUpdate，并且应该删除ref。使用API。

<input
       type="search"
       className="filter-input"
       placeholder="Search property..."
       onChange={this.props.searchUpdate} // - just pass a prop
    />

    searchUpdate(event){
            this.setState({
                searchText: event.target.value // get value from onChange event
            });
        }