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

最新推荐文章于 2023-02-17 19:56:29 发布

在线打码

最新推荐文章于 2023-02-17 19:56:29 发布

阅读量189

点赞数 2

分类专栏：前端文章标签： react js javascript vue 列表

本文链接：https://blog.csdn.net/oNew_Lifeo/article/details/118916567

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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>

<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>

实现效果
在这里插入图片描述

在线打码

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
【React】官网React哲学案例实现

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

扫一扫