快速理解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月)

解放战争(上)(1945年8月—1948年9月)

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

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

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试