web前端零基础课-1012上周总结

<!-- 周总结 -->

1. 学了什么?

1.1 ReactJs

1.1.1 React JSX基本语法

render() {

return <div></div>

}

1.1.2 React组件,类组件,复合组件

组件首字母必须大写

类组件中的方法内部不绑定this,在方法内部使用this,需要用bind(this)传入

this.xxx.bind(this)

1.1.3 React组件通信。单向数据流 props, state

props属性,一般传递的是不变的数据

state状态,一般传递可变的数据,也就是根据用户行为来改变state

state发生变化,会调用rendern()方法,重新渲染视图。

.setState() 设置state

1.1.4 React事件。使用驼峰命名法

<div onClick={xxx}></div>

1.1.5 React组件生命周期以及对应的钩子函数

componentWillMount() 组件挂载到真实DOM之前触发

componentDidMount() 组件挂载到真实DOM之后触发

componentWillUpdate() 接收到新的props或state之前触发

componentDidUpdate() 接收到新的props或state之后触发

componentWillUnmount() 组件销毁之前触发

1.16 React-Router,路由,本质上是对 history对象的封装。简单来说就是地址

<Link to="/xxx" />

路由使用 Link定义,to属性指向要跳转到的地址,在实际DOM中,Link会被渲染成一个a标签。

<HashRouter>

<Route path="/xxx" component={xxx} />

</HashRouter>

HashRouter是一个Router的顶层对象,管理相关路由

Route定义单个路由,path属性定义路径,component属性定义路径的指向。

1.1.7 Redux 状态管理,用于解决复杂环境下的多组件通信

store对象: createStore( reducer ) 创建 store 对象

.getState() 获取state

.dispatch( action ) 发送action

.subscribe() 监听state变化,重新渲染视图

view —> store.dispatch({type: xxx}) —> reducer(state, action) —> store.subscribe(xxfn) —> update view

1.2 ECMAScript2015

1.2.1 ES6中的变量声明,新增let,const声明方式

let,声明块级作用域变量

const,声明常量

1.2.2 ES6函数扩展

let a = () => {}

箭头函数,相当于ES5中的匿名函数;var a = function() {}

需要注意的是,箭头函数中不绑定this,箭头函数中的this紧紧跟随其运行环境中的this指向。

...types,动态参数,相当于ES5中的arguments对象

需要注意的是,它们本质上的区别。arguments属于对象;...types属于数组

1.2.3 解构赋值

let obj = {a:11, b:22};

let {a, b} = obj;

console.log(a); // 11

let arr = ['aa', 'bb', 'cc'];

let [a, b, c] = arr;

console.log(a); // 'aa'

2. 做了什么?

2.1 ReactJs 相关demo

2.4 ES6相关demo

2.3 React-Router 相关demo

2.4 Redux 相关demo

3. 有啥问题?

没啥大问题,主要还是不熟悉,思路捋通了多写几遍就好了。

4. 有啥收获?

4.1 对ES6语法,特性进一步加深理解运用

4.2 学会基本运用ReactJs

原文发布于微信公众号 - web前端教室(webfeel)

原文发表时间:2018-10-15

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏魂祭心

原 js页面传值参数打包类

3415
来自专栏从零开始学 Web 前端

从零开始学 Web 之 jQuery(八)each,多库共存,包装集,插件

each 方法用来遍历 jQuery 对象的,它的参数是一个事件处理函数,这个事件处理函数有两个参数,第一个参数是索引,第二个参数时索引对应的 DOM 对象,使...

1274
来自专栏拂晓风起

jQuery中this与$(this)的区别

1242
来自专栏超然的博客

不容忽略的——CSS规范

         当A、B、C、...它们类型相同且外形相似区别不大,那么就以它们中出现率最高的做成基类,其他做成基类的扩展。

1122
来自专栏我和未来有约会

(收藏)JS验证

1 /* 2 函数名:检验表单的函数 3 作者:xuwen 日期:2007-2-10 4 参数 _obj:验证的对象 ...

25510
来自专栏简书专栏

基于bs4+requests爬取世界赛艇男运动员信息(进阶篇)

在详情页面,部分页面具有5个字段信息,部分页面具有2个字段信息。 每个字段信息都在li标签中,对每个li标签做循环遍历。 将li标签中的第1个class等于...

782
来自专栏IMWeb前端团队

React组件生命周期

React组件生命周期 React的组件的生命周期分为三个过程: 装载过程(Mount):第一次把组件渲染到DOM树的过程; 更新过程(Update):组件进行...

2157
来自专栏卡少编程之旅

四个Vue的写法优化技巧

3536
来自专栏nice_每一天

如何编写高效的jQuery代码(转载)

1. jQuery速度再快,也无法与原生的javascript方法相比,而且建立的jQuery对象包含的信息量很庞大。所以有原生方法可以使用的场合,尽量避免使...

762
来自专栏GreenLeaves

Vue.js系列之三模板语法

Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ,...

23810

扫码关注云+社区

领取腾讯云代金券