10月底学习笔记


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-reactbabel-preset-es2015并且在.babelrcconfiguration配置文件中启用它们, 到这里就准备就绪了。

开发和生产版本

默认情况下,React 会包含很多有用的警告,这些警告在开发中非常有用。

然而,这些警告使开发版本的 React 体积过大并且运行过慢,所以你应该在部署应用时使用生产版本

了解如何判断你的网页是否运行了合适的 React 版本, 以及如何有效的配置生产构建程序:

使用 Create React App 构建应用

使用独立文件构建应用

使用 Brunch 构建应用

使用 Browserify 构建应用

使用 Rollup 构建应用

使用 Webpack 构建应用

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 只会更新必要的部分

组件 & Props

组件可以将UI切分成一些的独立的、可复用的部件,这样你就只需专注于构建每一个单独的部件。


react官网快速开始 21:09 -- 21:48


组件 & Props

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

推荐阅读更多精彩内容