Redux自定义渲染页面

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/fenglixiong123/article/details/82635245

import React from 'react'
import ReactDOM from 'react-dom'
import App from './components/app'
// import Context from './context/context'
// ReactDOM.render(<Context/>,document.getElementById('root'));

//播放器

//声明一个全局状态
let appState = {

    isPlaying:false,
    screen:{
        title:'java is easy'
    },
    button:{
        text:'播放'
    }

};

const renderScreen = (screen)=>{
    //获取页面元素
    const sc = document.querySelector('#screen');
    //对页面元素进行修改
    sc.innerHTML = `${screen.title}:${appState.isPlaying}`;
};

const renderButton = (button)=>{
    //获取页面元素
    const btn = document.querySelector('#button');
    //对页面元素进行修改
    btn.innerHTML = button.text;
};

//全局渲染方法
const renderApp = (state)=>{
    //渲染屏幕
    renderScreen(state.screen);
    //渲染按钮
    renderButton(state.button);
};


//全局初始化
renderApp(appState);

//对按钮进行监听
document.querySelector("#button").addEventListener('click',()=>{
    //判断播放状态
    if(!appState.isPlaying){
        //修改播放状态
        appState.isPlaying = true;
        //修改按钮
        appState.button = {
            text:'停止'
        }
    }else {
        //修改播放状态
        appState.isPlaying = false;
        //修改按钮
        appState.button = {
            text:'播放'
        }
    }
    //重新渲染
    renderApp(appState);
});

// ReactDOM.render(<App/>,document.getElementById('root'));