快速理解React的开发思想

栏目: IOS · Android · 发布时间: 5年前

内容简介：相比较于VUE, 个人在开发过程中更加倾向于REACT，不是因为REACT更好用，相反是更难用，就是大家所说的学习曲线陡，但是REACT个人觉得正是因为他难用，或者说，代码风格更加趋近于原生JS,尤其是ES6的面向对象的编程思想，可以一边开发，一边提升自己的原生js熟练程度，不至于过度产生框架依赖。

相比较于VUE, 个人在开发过程中更加倾向于REACT，

不是因为REACT更好用，相反是更难用，就是大家所说的学习曲线陡，

但是REACT个人觉得正是因为他难用，或者说，代码风格更加趋近于原生JS,尤其是ES6的面向对象的编程思想，可以一边开发，一边提升自己的原生js熟练程度，不至于过度产生框架依赖。

下面以一个点赞事件为例

采用纯js开发思想，由于没有JSX编译，所以暂时使用模版字符串做替代。

1. 理解数据驱动思想

<body>
    <div id="root"></div>
    <!--root将会被作为根节点，在里面渲染一个按钮，实现点赞事件-->
    
    <script>
    var root = document.getElementById('root');
    
    //1. 设置初始化状态
    var state =  {
        like : false,
        color:'black'
    }
    
    //2. 通过setState触发修改数据触发渲染事件
    function setState (newState){
        state = {
            ...state,
            ...newState
        }
        console.log(state)
        render();
    }
    
    // 加载页面进行初始化渲染
    render();

    // 事件 调用该事件 触发 setState 进行渲染
    function handleClick(){
        setState({
            like : !state.like,
            color: state.like?  'black' :'red'
        })
    }
    
    // 渲染页面函数
    function render(){
        root.innerHTML =  
        `
        <button style="color:${state.color}" onclick="handleClick()">${state.like? '已赞':'点赞'}</button>
        `
    }
    </script>
</body>

复制代码

0. 初始化渲染，绑定事件

1. 触发事件函数，该函数进行触发setState

2. setState被触发，修改状态(修改state中的数据)，修改后触发渲染函数

3. 渲染该组件

2.理解react的面向对象的组件式开发思想

<body>
    <div id="root"></div>
    <!--在这个节点上面渲染-->
    
    <script>
        var root = document.getElementById('root')
        
        // 这个是父类
        class Component {
            setState(newState) {
                this.state = {
                    ...this.state,
                    ...newState
                }
                return this;
            }
        }
        
        // 这个是子类 按钮 继承父类的setState功能
        class Button extends Component {
            constructor() {
                super()
                this.state = {
                    like: false
                }
                this.render()
            }
            render() {
                const state = this.state;
                const node = `<button style="color:${state.like ? 'red' : 'black'}" onclick="this.handleClick()">${state.like ? '已赞' : '点赞'}</button>`;
                
                return node;
            }
        }
        // 这个是子类 标题 继承父类的setState功能
        class Title extends Component {
            constructor() {
                super()
                this.state = {
                    text: '这是一个标题'
                }
            }
            render() {
                return `<h1>${this.state.text}</h1>`
            }
        }
        
        //这个作为包装容器， 
        class Wrap {
            constructor() {
            }
            render() {
                return `
                // 构造渲染子类
                ${new Title().render()}
                // 可以调用修改自己的状态， 每一个模块都相互独立，互不影响。
                ${new Button().setState({ like: true }).render()}
                ${new Title().render()}
                ${new Button().render()}
                `
            }
        }
        //将wrap渲染到 html中
        root.innerHTML = new Wrap().render();

    </script>
</body>
复制代码

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

解放战争（上）（1945年8月—1948年9月）

王树增 / 人民文学出版社 / 2009-8 / 60.00

《解放战争》为王树增非虚构文学著述中规模最大的作品。武器简陋、兵力不足的军队对抗拥有现代武器装备的兵力庞大的军队，数量不多、面积有限的解放区最终扩展成为九百六十万平方公里的共和国，解放战争在短短四年时间里演绎的是人类历史上的战争传奇。国际风云，政治智慧，时事洞察，军事谋略，军队意志，作战才能，作品具有宏阔的视角和入微的体察，包含着惊心动魄的人生沉浮和变幻莫测的战场胜负，尽展中国历史上规模最大的一场......一起来看看《解放战争（上）（1945年8月—1948年9月）》这本书的介绍吧!

码农工具