1: extends
在类的声明中,通过关键字extends来创建一个类的子类(不支持多重继承)
class A extends B // A继承B
// extends是继承父类,继承后可以使用父类的方法,也可重写父类方法
2: implements
一个类通过关键字implements声明自己使用一个或多个接口（可实现多个接口逗号分开）
class A extends B implements C,D,E
// implements是实现多个接口,接口的方法一般是空的,需要重写才能使用
- 实现一个接口就是实现该接口的所有方法（抽象类除外）
- 接口中的方法都是抽象的
- 多个无关的类可以实现一个接口,一个类可以实现多个无关的接口
3:有状态组件(类组件) 与 无状态组件(函数组件)
react中组件根据自身状态可以分为无状态组件或函数组件,另一种叫做有状态组件或类组件。无状态组件接受一个props参数,主要是用来渲染模板,内部没有复杂的业务逻辑。反之,有状态组件使用关键字class来创建的,内部主要就是负责的业务逻辑
findDOMNode()、ref 能用到有状态组件上
4:findDOMNode()
当组件加载页面以后,就可以通过react-dom 中提供的findDOMNode（）拿到组件对应的DOM元素
import { findDOMNode } from 'react-dom'
componentDidMound() {
const el = findDOMNode(this) // findDOMNode() 只能用在有状态组件上。
}
5:refs
在引用的DOM元素上设置一个ref属性指定一个名称,然后通过this.$refs.name来获取对应的DOM元素
clearAndFocusInput() {
this.setState({ userInput: '' }, () => {
this.refs.theInput.focus(); // ref名称为‘ theInput’的元素获取焦点
});
}
// render()中的input
<div>
<div onClick={this.clearAndFocusInput.bind(this)}>
清空input值后获取焦点
</div>
<input
ref="theInput"
value={this.state.userInput}
onChange={this.handleChange.bind(this)}
/>
</div>
- 可以使用ref到的组件所有的公共方法 比如：this.$refs.myRef.reset()
- refs是访问到组件内部DOM节点唯一可靠的方法
- refs会自动销毁对子组件的引用（当子组件删除时）
refs只能在有状态组件中使用,另外不要在render或render之前访问refs
6:setInterval() 与 setTimeOut()
- setInterval()表示每隔多少毫秒执行一次,可循环执行多次直到clearInterval()
- setTimeOut()表示在指定的毫秒数后执行函数或者表达式,只执行一次
7：PropTypes：类型检查
import PropTypes from 'prop-types';
class Greeting extends React.Component {
render() {
return (
<h1>Hello, {this.props.name}</h1>
);
}
}
Greeting.propTypes = {
name: PropTypes.string
};
// PropTypes.string.isRequired 加上 `isRequired`是确保这个 prop 没有被提供时，会打印警告信息
PropTypes提供一系列验证器,可用于确保组件接收到的数据类型是有效的。在本例中我们使用了PropTypes.string。当传入的prop值类型不正确时,JavaScript控制台将会出现警告,处于性能的考虑PropTypes仅在开发模式下检查
8: defaultProps :定义 props 的默认值
class Greeting extends React.Component {
render() {
return (
<h1>Hello, {this.props.name}</h1> // 在name为空时显示默认值‘Stranger’
);
}
}
// 指定 props 的默认值：
Greeting.defaultProps = {
name: 'Stranger'
};
9：autofocus（H5新属性）
autofocus是一个布尔值,属性规定当页面加载时<input>应自动获得焦点
<input
type="text"
autofocus // eslint-disable-line jsx-a11y/no-autofocus
/> // 以上增加注释 对指定行 禁用规则警告
网友评论