1. Angular模板 vs JSX
| Angular | React | hook | |
|---|---|---|---|
| 属性绑定 | [class]="className" | className={this.className} 关键字 class写为className关键字 for写为htmlFor | |
| 事件绑定 | (click)="handleClick()" | onClick={this.handleClick} 1. 绑定函数指针,避免渲染组件时触发子组件事件流 2.使用箭头函数，避免this指向问题 | |
| 组件属性 | @Input()xxx | 只读属性this.props.xxxpropTypes定义类型 | |
| 组件方法 | @Output()xxx | this.props.xxx方法 | |
| 内容投影 | <ng-content> | 关键字this.props.children使用 React.Children处理子节点undefined/object/array情况 | |
| 获取真实DOM | elementRef | ref属性React.createRef() | |
| 组件状态 | 直接声明组件类属性 | stategetInitialState设置初始状态setState方法修改状态值,修改之后会调用render方法重新渲染DOM | const [xxx, setStatexxx] = useState('initial value'); |
| 组件生命周期 | x | componentWillMount() componentDidMount() componentWillUpdate(object nextProps, object nextState) componentDidUpdate(object prevProps, object prevState) componentWillUnmount() componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用 shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用 |
