10.24日
react 官网tutorial(15：14 --17：06 （中间休息半个小时）1.5h左右)
1.ES6 写法
onClick={()=>alert('click')}
注意到这里我们传给onClick属性的是一个函数方法，假如我们写的是onClick={alert('click')}警示框是会立即弹出的。
2. supper()
使用JavaScript classes时，你必须调用 super() 方法才能在继承父类的子类中正确获取到类型的this
3. 组件间数据传递
当你遇到需要同时获取多个子组件数据，或者两个组件之间需要相互通讯的情况时，把子组件的 state 数据提升至其共同的父组件当中保存。之后父组件可以通过 props 将状态数据传递到子组件当中。这样应用当中的状态数据就能够更方便地交流共享了。
学习至状态提升
react官网快速开始 17:13 --17：57
包管理器yarn npm
构建器 webpack Browserify 编写模块代码并将其压缩，优化加载时间。
编译器 Babel
abel 安装说明说明了如何在多种不同的环境中配置 Babel，确保你已经安装了babel-preset-react和babel-preset-es2015并且在.babelrcconfiguration配置文件中启用它们, 到这里就准备就绪了。
开发和生产版本
默认情况下，React 会包含很多有用的警告，这些警告在开发中非常有用。
然而，这些警告使开发版本的 React 体积过大并且运行过慢，所以你应该在部署应用时使用生产版本
了解如何判断你的网页是否运行了合适的 React 版本, 以及如何有效的配置生产构建程序：
JSX 本身其实也是一种表达式
在编译之后呢，JSX 其实会被转化为普通的 JavaScript 对象。
这也就意味着，你其实可以在if或者for语句里使用 JSX，将它赋值给变量，当作参数传入，作为返回值都可以
引号来定义以字符串为值的属性 大括号来定义以 JavaScript 表达式为值的属性
如果 JSX 标签是闭合式的，那么你需要在结尾处用 />
JSX 标签同样可以相互嵌套
JSX 的特性更接近 JavaScript 而不是 HTML , 所以 React DOM 使用camelCase小驼峰命名 来定义属性的名称，而不是使用 HTML 的属性名称。
例如，class变成了className，而tabindex则对应着tabIndex.
JSX 防注入攻击
元素是构成 React 应用的最小单位。
React 元素都是immutable 不可变的。当元素被创建之后，你是无法改变其内容或属性的。更新界面的唯一办法是创建一个新的元素
React 只会更新必要的部分
组件可以将UI切分成一些的独立的、可复用的部件，这样你就只需专注于构建每一个单独的部件。
react官网快速开始 21:09 -- 21：48
React元素 可以是DOM标签，也可以是用户自定义的组件
组件名称必须以大写字母开头
组件的返回值只能有一个根元素。这也是我们要用一个
来包裹所有元素的原因。
纯函数 有改变它自己的输入值，当传入的值相同时，总是会返回相同的结果。
非纯函数 会改变它自身的输入值
node建站 23：09--23:17
react 音乐播放器 23:17 -- 0：14
React-router
browserHistory (yoursite.com/a/b)
hashHistory (yoursite.com/#a/b)
两种组件 （react 2.0）
IndexRoute (没有url时，系统默认使用这个)
Route
<Link to = "uri" > </limk>
建立App组件类
history={hashHistory}
使用哈希uri格式
Route 可以嵌套 只更新页面局部内容
path="/list"component={MusicList}
path 路径 component路径对应的组件 IndexRoute默认首页？
this.props.children
当前App下的子组件 匹配到的components
React.cloneElement(this.props.children,this.state)
克隆组件 用于传入数据，因为Route定位组件并未传入数据
this.props.children克隆的组件
this.state 克隆的数据
展示结果 ： 有uri对应页面 页面uri不一样 需要提供跳转页面功能
使用Link跳转到相对应的页面<Link to=""></Link>
???列表页增加详情信息？？？
react 音乐播放器 21:05 -- 21：28 22:48-23：13 23:53 -- 01:11
运用“订阅”功能管理传递参数
onClick 不应该是可执行函数，应该是函数句柄。？？？运用bind()绑定作用域同时传参
stopPropagation()阻止事件冒泡？？
Pubsub.publish 发布事件 subscribe 接收事件 unsubscribe 解绑事件(普通解绑用unbind)
播放下一曲
思路：获取musiclist的index 然后播放
方法：
1.获取index方法 indexOf()
2. 获取是当前列表下第几首歌曲 用取余的方法避免最后一首变换成第一首时需要的变化。
onClick={this.playPrev}
{this.state.leftTime}
formatTime(time){
time=Math.floor(time);
letminutes=Math.floor(time/60);
letseconds=Math.floor(time%60);
seconds=seconds<10?`0${seconds}`:seconds;
return`${minutes}:${seconds}`;
},
改变剩余时间: getInitialState 加参数 componentDidMount(){} 对事件进行操作
virtual DOM
DOM diff
网友评论