快速理解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>
复制代码

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