React整理

152 阅读2分钟

1、React使用jsx语,什么是jsx?

//例1
const element = <h1>Hello, world! {1+1} </h1>;

例1 这样一个表达式,既不是字符串也不是HTML,它的全称是JavaScript XML,是React独有的语法,能够让html和js混合着写。jsx基本语法规则是:遇到html标签,就用html规则解析,遇到js代码,就用js规则解析。

2、React.render()的作用是什么?

ReactDOM.render 是 React 的最基本方法,用于将模板转为 HTML 语言,并插入指定的 DOM 节点。

//例2
ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

3、关于React组件要注意的点

1)可以将代码块封装成组件,在页面中写入 如:<Hello />可以直接插入该组件(实际上是该组件的实例)。
2)每个组件必须有自己的render方法,用来输出这个组件。。
3)组件名首字母必须大写。。
4)组件只能包含一个顶级标签。。
5)组件可以任意添加属性。如<HEllo name='Pheobe' />。
6)class和for是js的保留字,作为属性时要写成驼峰式的className和htmlFor。

4、如何获取真实的DOM节点

使用ref,如例3

// 例3
  <input type="text" ref="myTextInput" /> //  this.refs.[refName] 就会返回这个真实的 DOM 节点。

注意:由于 this.refs.[refName] 属性获取的是真实 DOM ,所以必须等到虚拟 DOM 插入文档以后,才能使用这个属性,否则会报错。

5、React组件生命周期

  • Mounting 已插入真实DOM
  • Updating 正在被重新渲染
  • Unmounting 已移出真实 DOM

React 为每个状态都提供了两种处理函数,will 函数在进入状态之前调用,did 函数在进入状态之后调用。

  • componentWillMount() 组件即将被渲染到页面(插入真实DOM)之前触发
  • componentDidMount() 组件已经被渲染到页面中后触发
  • componentWillUpdate(object nextProps, object nextState) 组件即将被更新(重新渲染)时触发
  • componentDidUpdate(object prevProps, object prevState) 组件被更新完成后触发
  • componentWillUnmount() 组件被销毁时触发。

React 还提供两种特殊状态的处理函数:

  1. componentWillReceiveProps(object nextProps)
    已加载组件收到新的props时调用
  2. shouldComponentUpdate(object nextProps, object nextState)
    组件判断是否重新渲染时调用, 默认情况返回true。如果shouldComponentUpdate返回false, 那么componentWillUpdate, render(), componentDidUpdate()都不会被触发。

参考文献