【React】官网React哲学案例实现

89 阅读 0 评论 59 点赞

我是靠谱客的博主欢喜摩托，这篇文章主要介绍【React】官网React哲学案例实现，现在分享给大家，希望可以做个参考。

React干啥的？
用于构建用户界面的 JavaScript 库
为什么要学？
1.原生JavaScript操作DOM繁琐、效率低（DOM-API操作Ul)
2.使用JavaScript直接操作DOM，浏览器会进行大量的重绘重排
3.原生JavaScript没有组件化编码方案，代码复用率低
命令式编码和声明式编码
React的特点
1.采用组件化模式、声明式编码，提高开发效率及组件复用率
2.在React Native中可以使用React语法进行移动端开发
3.使用虚拟DOM+优秀的Diffing算法，尽量减少与真实DOM的交互

官方文档：https://reactjs.org/
中文文档：https://react.docschina.org/

React哲学案例

在这里插入图片描述
demo.html

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React哲学案例</title>
</head>

/* 组件层级
        - FilterableProductTable
            - SearchBar
            - ProductTable
                - ProductCategoryRow
                - ProductRow
        */

class FilterableProductTable extends React.Component{
            constructor(props){
                super(props)
                console.log(props.productList);
                this.handleChange = this.handleChange.bind(this);
                this.productFilter = this.productFilter.bind(this);
                this.state = {"stocked":false,"search":''}
            }

handleChange(key,value){
                this.setState({
                    stocked:key === 'stocked' ? value : this.state.stocked,
                    search:key === 'search' ? value : this.state.search
                });
            }

// 根据条件筛选商品
            productFilter(){
                const stocked = this.state.stocked;
                const search = this.state.search;
                var newList = stocked === true ? this.props.productList.filter(
                    function (item) {
                        if (item.stocked === true){
                            if(item.name.indexOf(search) >= 0){
                                return item;
                            }
                        }
                    }
                ) : this.props.productList.filter(
                    function (item) {
                        if(item.name.indexOf(search) >= 0){
                            return item;
                        }
                    }
                );
                //console.log(newList);
                return newList;
            }

render(){
                var products = this.productFilter(); // 渲染前进行过滤
                return (
                    <div>
                        <SearchBar handleChange={this.handleChange}></SearchBar>
                        <ProductTable products={products}></ProductTable>
                    </div>
                );
            }
        }

class SearchBar extends React.Component{
            constructor(props){
                super(props)
                this.handleCheckboxChange = this.handleCheckboxChange.bind(this);
                this.handleSearchChange = this.handleSearchChange.bind(this);
                this.state = {"stocked":false,"search":''}
            }

handleSearchChange(event){
                this.setState({search:event.target.value});
                this.props.handleChange("search",event.target.value);
            }

handleCheckboxChange(){
                this.setState({stocked:event.target.checked});
                this.props.handleChange("stocked",event.target.checked);
            }

render(){
                const stocked = this.state.stocked;
                const search = this.state.search;
                return (
                    <div>
                        <input value={search} onChange={this.handleSearchChange} type="text" placeholder="Search..."/>
                        <p><input checked={stocked} onChange={this.handleCheckboxChange} type="checkbox" name="stocked" />Only show products in stock</p>    
                    </div>
                );
            }
        }

class ProductTable extends React.Component{
            constructor(props){
                super(props)
            }
            // 根据列表渲染数据
            showProductList(){
                console.log("渲染表格数据");
                //console.log(this.props.products);
                var productList = this.props.products;
                // 存储dom
                var doms = [];
                // 对产品进行分类
                let newData = {}
                productList.forEach(e => {
                    // 新建属性名
                    if(Object.keys(newData).indexOf('' + e.category) === -1 ){
                        newData[e.category] = []
                    }
                    // 对应插入属性值
                    newData[e.category].push(e)
                });
                console.log(newData);
                for (var key in newData) {
                    doms.push(<ProductCategoryRow key={key} category={key}></ProductCategoryRow>)
                　　var item = newData[key];
                    item.map(e=>{
                        doms.push(<ProductRow key={e.name} name={e.name} price={e.price}></ProductRow>)
                    });
                }
                return doms;
            }

render(){
                var list = this.showProductList();
                return (
                    <div>
                        <h3>Name           Price </h3>
                        {list}
                    </div>
                );
            }
        }

class ProductCategoryRow extends React.Component{
            constructor(props){
                super(props)
            }
            render(){
                return (
                    <h4>
                          {this.props.category} 
                    </h4>
                );
            }
        }

class ProductRow extends React.Component{
            constructor(props){
                super(props)
            }
            render(){
                return (
                    <div>
                          {this.props.name} {this.props.price} 
                    </div>
                );
            }
        }

function App(){
            return (
                <FilterableProductTable productList={jsonData}></FilterableProductTable>
            );
        }
        ReactDOM.render(
            <App ></App>,
            document.getElementById('root')
        );
    </script>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React哲学案例</title>
</head>

<body>
    <div id ="root"> </div>

    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/babel"> /*此处必须为babel  支持jsx语法*/
        var jsonData =[
            {category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football"},
            {category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball"},
            {category: "Sporting Goods", price: "$29.99", stocked: false, name: "Basketball"},
            {category: "Electronics", price: "$99.99", stocked: true, name: "iPod Touch"},
            {category: "Electronics", price: "$399.99", stocked: false, name: "iPhone 5"},
            {category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7"}
        ];

        /* 组件层级
        - FilterableProductTable
            - SearchBar
            - ProductTable
                - ProductCategoryRow
                - ProductRow
        */

        class FilterableProductTable extends React.Component{
            constructor(props){
                super(props)
                console.log(props.productList);
                this.handleChange = this.handleChange.bind(this);
                this.productFilter = this.productFilter.bind(this);
                this.state = {"stocked":false,"search":''}
            }

            handleChange(key,value){
                this.setState({
                    stocked:key === 'stocked' ? value : this.state.stocked,
                    search:key === 'search' ? value : this.state.search
                });
            }

            // 根据条件筛选商品
            productFilter(){
                const stocked = this.state.stocked;
                const search = this.state.search;
                var newList = stocked === true ? this.props.productList.filter(
                    function (item) {
                        if (item.stocked === true){
                            if(item.name.indexOf(search) >= 0){
                                return item;
                            }
                        }
                    }
                ) : this.props.productList.filter(
                    function (item) {
                        if(item.name.indexOf(search) >= 0){
                            return item;
                        }
                    }
                );
                //console.log(newList);
                return newList;
            }

            render(){
                var products = this.productFilter(); // 渲染前进行过滤
                return (
                    <div>
                        <SearchBar handleChange={this.handleChange}/>
                        <ProductTable products={products}/>
                    </div>
                );
            }
        }

        class SearchBar extends React.Component{
            constructor(props){
                super(props)
                this.handleCheckboxChange = this.handleCheckboxChange.bind(this);
                this.handleSearchChange = this.handleSearchChange.bind(this);
                this.state = {"stocked":false,"search":''}
            }

            handleSearchChange(event){
                this.setState({search:event.target.value});
                this.props.handleChange("search",event.target.value);
            }

            handleCheckboxChange(){
                this.setState({stocked:event.target.checked});
                this.props.handleChange("stocked",event.target.checked);
            }

            render(){
                const stocked = this.state.stocked;
                const search = this.state.search;
                return (
                    <div>
                        <input value={search} onChange={this.handleSearchChange} type="text" placeholder="Search..."/>
                        <p><input checked={stocked} onChange={this.handleCheckboxChange} type="checkbox" name="stocked" />Only show products in stock</p>    
                    </div>
                );
            }
        }

        class ProductTable extends React.Component{
            constructor(props){
                super(props)
            }
            // 根据列表渲染数据
            showProductList(){
                console.log("渲染表格数据");
                //console.log(this.props.products);
                var productList = this.props.products;
                // 存储dom
                var doms = [];
                // 对产品进行分类
                let newData = {}
                productList.forEach(e => {
                    // 新建属性名
                    if(Object.keys(newData).indexOf('' + e.category) === -1 ){
                        newData[e.category] = []
                    }
                    // 对应插入属性值
                    newData[e.category].push(e)
                });
                console.log(newData);
                for (var key in newData) {
                    doms.push(<ProductCategoryRow key={key} category={key}/>)
                　　var item = newData[key];
                    item.map(e=>{
                        doms.push(<ProductRow key={e.name} name={e.name} price={e.price}/>)
                    });
                }
                return doms;
            }

            render(){
                var list = this.showProductList();
                return (
                    <div>
                        <h3>Name           Price </h3>
                        {list}
                    </div>
                );
            }
        }

        class ProductCategoryRow extends React.Component{
            constructor(props){
                super(props)
            }
            render(){
                return (
                    <h4>
                          {this.props.category} 
                    </h4>
                );
            }
        }

        class ProductRow extends React.Component{
            constructor(props){
                super(props)
            }
            render(){
                return (
                    <div>
                          {this.props.name} {this.props.price} 
                    </div>
                );
            }
        }

        function App(){
            return (
                <FilterableProductTable productList={jsonData}/>
            );
        }
        ReactDOM.render(
            <App />,
            document.getElementById('root')
        );
    </script>
</body>
</html>