React 快速构建用户界面的JavaScript库

编写方式:

• 脚本引入方式 script标签 入门学习使用

  • react.js react库 组件 虚拟DOM对象

  • react-dom.js 操作DOM渲染 render

  • babel.min.js 语法转义 JSX语法

• 脚手架方式 类vue-cli 工程化方式 企业中开发使用

JSX语法 javascript中拥有写html的体验 xml

JSX代码中使用JS代码部分需要通过{}包裹

组件:组成页面的零部件 封装 复用

封装组件方式:

• rfc 函数组件 function 方法名 大驼峰

• rcc 类组件 class render方法返回JSX语法标签

props 外部传参给组件内部使用 函数传参 类方式 实例化时传参

组件调用:

• 函数方式 函数调用

• 类方式 {new App({name:'hello'})}

事件 事件触发的方式时,this指向的问题?

默认情况,浏览器执行的window

严格模式 undefined React默认严格模式

<button onClick={this.show}>点击</button>

解决方案:

方法一: 通过bind绑定this下传

<button onClick={this.show.bind(this)}>点击</button>

方法二: 普通函数方法 事件触发丢失this指向 箭头函