React再学习第二天

Day2

-React基础

+组件化

-TodoMVC

+Vue Angular

*支持直接管理DOM模板

*虚拟DOM

+拆分成组件

*利用组件通信来让他们协同交互

+MVVM:数据驱动视图

+列表渲染

+样式处理

+条件

+数据绑定

+组件

*props

*单项数据流

+表单控件的处理

*没有双向数据绑定

*必须自己手动来处理表单数据问题

yarn init –y

yarn add react react-dom @babel/standalone

01开发环境

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<!--

@babel/standalone 的作用是可以在浏览器中调用babel的api完成ES6-ES5的转换

@babel/standalone 是一个独立的编译工具，支持调用它的API完成ES6到ES5的转换

-->

</body>

调用API编译执行:

//调用Babel提供的转换API完成编译转换，得到结果字符串

//编译过程比较耗时，所以只推荐开发测试使用

//咱们这里使用它的目的是为了简化学习过程

var input = 'const getMessage = () => "Hello World";';

var output = Babel.transform(input, { presets: ['es2015'] }).code;

console.log(output);

</script>

自动编译执行:

// text/babel以后babel会去编译它

const getMessage = () => "Hello World";

console.log(getMessage);

console.log(getMessage())

</script>

</html>

02 hello world

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

//下面这句话的作用就是将一个h1标签渲染到指定的页面入口中

ReactDOM.render(<h1>Hello,react!</h1>,document.getElementById('app'));

</script>

</html>

03 jsx基本语法

·非模块化环境

·babel-standalone

·执行时编译，速度比较慢

·模块化环境

·结合webpack配置babel响应的工具完成预编译

·浏览器执行的是预编译结果

·Babel REPL赋值查看编译结果

·使用在线测试

JSX基本语法:

1.只能有一个根节点

04 在jsx中绑定js表达式以及jsx注释

{ /* */ }

05 在 js语法中使用jsx标签

06.jsx属性绑定

class要写成className

label中的for要携程htmlFor

jsx单标签必须结束

(比如input标签必须要以/结尾)

07.jsx语法高亮

·必须有且只有一个根节点

JSX编译成React.createElement..

checked要写成 defaultChecked

value 要写成defaultValue

08.列表渲染

var arr = [<li key=’1’>a</li>,<li key=’2’>b</li>]

{arr}

09.事件绑定处理

onClick = { ()=>{ } }

10.组件介绍

这样也能显示header，实现了复用，但是这不叫组件，这只是一个普通变量，没有状态，

组件有状态和生命周期。

·函数式组件(无状态)

function (props)

{

return jsx…

}

·类组件(有状态)

class a extends React.Component{

constructor(){

super()

}

render(){

return jsx..

}

使用this.setState来修改状态

11.class基本语法

实例方法

静态方法

实例属性

静态属性

12.class的继承

extends

13.最基本的类方式定义的组件

class本质就是ES5prototype实现继承的语法糖

14.组件的状态

15.-事件绑定中的this问题

}

拿到事件源

通过参数e/event

onClick = { (e)=>{console.log(e.target)} }

第一种方式:

第二种方式:

第三种方式:

16.再次强调事件绑定中this的坑

第一种绑定方式

onClick = {this.handleClick}

·this指向Window

·默认接收一个参数 event 事件源对象

·不支持额外的参数传递

第二种方式(bind)

·this指向组件实例

·默认接收一个参数 event

onClick = {this.handleClick.bind(this)}

第二种参数还可以为方法传递额外参数，

·手动传递的参数会放到参数的最前面, event 会作为函数的最后一个参数

onClick = {this.handleClick.bind(this,123,456)}

第三种方式

·不存在this的问题

·手动传递参数

·参数顺序自己制定，event也需要自己手动传递

onClick = {(e)=>{this.handleclick(e,123,456)}}

17.-TodoMVC

18-TodoMVC-把模板中的规则修改为React的方式

class className

单标签必须结束

autofocus autoFocus

注释

checked defaultChecked

value defaultValue

19.-TodoMVC-列表展示

20-添加任务

21-总结

babel-standalone

jsx语法

jsx属性绑定

React 列表渲染和条件渲染

组件

函数式组件

功能简单，没有状态，只适合封装视图

class组件

功能最完整，支持状态及生命周期等特性

组件的状态

定义

使用

修改

es6 class 的定义方式及继承方式

事件函数绑定内部this的问题

不做任何处理的绑定

bind

箭头函数

React再学习 第二天

猜你喜欢

React再学习第二天