React框架搭建简易音乐播放器

https://github.com/Zmaxt/react-music
              花了两周的时间，跟着视频学习，撸了个音乐播放器。技术栈：react，事件订阅，Jplayer，webpack自动化打包工具。
页面样式如下：

player.png

list.png

实现的功能有：
音乐播放，（播放模式：随机，单曲循环，顺序播放）
                       （播放设置：快进，后退，音量调节，暂停，启动）
列表查看，（删除，切换播放歌曲）
数据来源：
mock music list
开发步骤：
一.搭建开发环境：

webpack.png

1. npm init 创建package.json

2. npm install 安装依赖npm 会去找package.json下的dependencies安装

3. 创建webpack配置文件 webpack.config.js  （entry：index.js，output：path,filename）

4. 创建入口文件：index.js

5. Linux 命令：webpack 完成打包

6. 创建index.html页面运行
   webpack常用loader
   babel-loader
   css-loader
   less-loader
   webpack dev server
   搭建本地服务器，自动刷新
   

   

   image.png

   
   二.组件开发
   createClass 创建组件
   render 函数将返回的html结构挂载到DOM节点上
   <appcontainer></appcontainer>组件表明哪些组件需要更换
   componentDidMount 只会在装载完成之后调用一次，在 render 之后调用，从这里开始可以通过 ReactDOM.findDOMNode(this) 获取到组件的 DOM 节点。
   componentWillUnmount 解绑事件
   组件间通信：
   父子组件之间传递参数; props
   

   

   父-子.png

   
   

   

   子-父.png

   
   

   

   子组件接收.png

   
   

   

   调用父方法.png

非父子组件 pub/sub 事件订阅，不过复杂项目便难以维护，复杂大型项目使用flux。
三.路由
Router组件本身只是一个容器，真正的路由要通过Route组件定义。

Route.png

上面的是嵌套路由，先加载App组件，然后再加载Player组件
App组件要这样写：

App.png

App组件的this.props.children属性就是子组件。
flux的一种实现方法redux

单向数据流.png

redux流程.png

react.png

action.png

reducer.png

总结与思考：
1.Function bind(this,arg1,arg2,arg3)  绑定事件
2.

巧妙处理数组内循环index+1.png

3.state
组件免不了要与用户互动，React 的一大创新，就是将组件看成是一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染 UI 。
getInitialState(){
定义初始状态
}
通过this.state.[attr] 读取状态，this.setState({修改状态})

作者：穆熙沐
链接：https://www.jianshu.com/p/8ba97b4b7932