React 组件三大核心属性 state、props、refs

React的特点

• 声明式编码
• 组件化编码
• React Native 编写原生应用
• 高效（优秀的Diffing算法）

React高效的原因

使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。

DOM Diffing算法, 最小化页面重绘。

相关js库

react.js：React核心库。

react-dom.js：提供操作DOM的react扩展库。

babel.min.js：解析JSX语法代码转为JS代码的库。Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。通过将 Babel 和 babel-sublime 包（package）一同使用可以让源码的语法渲染上升到一个全新的水平。

以在官网 React – A JavaScript library for building user interfaces 下载最新版。

你也可以直接使用 Staticfile CDN 的 React CDN 库，地址如下：

官方提供的 CDN 地址：

注意: 在浏览器中使用 Babel 来编译 JSX 效率是非常低的。

BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务

组件三大核心属性

一、 state

state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)

组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)

组件中render方法中的this为组件实例对象

组件自定义的方法中this为undefined，如何解决？

a) 强制绑定this: 通过函数对象的bind()

constructor(props: Readonly) {
  super(props);
  this.handleBtnClick = this.handleBtnClick.bind(this);
}

b) 箭头函数

状态数据，不能直接修改或更新

示例：

需求：定义一个展示天气信息的组件

1. 默认展示天气炎热 或 凉爽

2. 点击文字切换天气

二、 props

每个组件对象都会有props(properties的简写)属性

组件标签的所有属性都保存在props中

作用

通过标签属性从组件外向组件内传递变化的数据

注意: 组件内部不要修改props数据

内部读取某个属性值

this.props.name

使用prop-types库进限制（需要引入prop-types库）

Person.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number. 
}

扩展属性: 将对象的所有属性通过props传递

Person {...person}/>

默认属性值：

Person.defaultProps = {
  age: 18,
  sex:'男'
}

组件类的构造函数

  constructor(props){
  super(props)
  console.log(props)//打印所有属性
}

示例：

需求：自定义用来显示一个人员信息的组件

1. 姓名必须指定，且为字符串类型；

2. 性别为字符串类型，如果性别没有指定，默认为男

3. 年龄为字符串类型，且为数字类型，默认值为1**8

二、refs与事件处理

组件内的标签可以定义ref属性来标识自己

字符串形式的ref

 回调形式的ref

{this.input1 = c}}

 createRef创建ref容器·

myRef = React.createRef() 

事件处理

• 通过onXxx属性指定事件处理函数(注意大小写)
• React使用的是自定义(合成)事件, 而不是使用的原生DOM事件
• React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)
• 通过event.target得到发生事件的DOM元素对象

示例：

需求：自定义用来显示一个人员信息的组件

需求: 自定义组件, 功能说明如下:

1. 点击按钮, 提示第一个输入框中的值

2. 当第2个输入框失去焦点时, 提示这个输入框中的值