微服务框架相关技术整理 (8)

ReactDOM.render()渲染组件标签的基本流程:

1.React内部会创建组件实例对象； 2.得到包含的虚拟DOM并解析为真实DOM； 3.插入到指定的页面元素内部； 组件的三大属性 props属性

1.每个组件对象都会有props(properties的简写)属性
2.组件标签的所有属性都保存在props中
3.内部读取某个属性值:this.props.propertyName
4.作用: 通过标签属性从组件外向组件内传递数据(只读)
5.对props中的属性值进行类型限制和必要性限制:

// 对标签属性进行限制 Person.propTypes = { name:React.PropTypes.string.isRequired, sex:React.PropTypes.string, age:React.PropTypes.number }

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

<Person {...person}/> //具体如下： ReactDOM.render(<Person {...person}/>,document.getElementById('example'))

7.默认属性值

// 指定属性的默认值 Person.defaultProps = { sex:'男', age:18 }

8.组件类的构造函数

constructor (props) { super(props) console.log(props) // 查看所有属性 } refs属性

1.组件内的标签都可以定义ref属性来标识本身
2.在组件中可以通过this.refs.refName来得到对应的真实DOM对象
3.作用: 用于操作指定的ref属性的dom元素对象(表单标签居多)

事件处理

通过onXxx属性指定组件的事件处理函数(注意大小写)

React使用的是自定义(合成)事件, 而不是使用的DOM事件

React中的事件是通过委托方式处理的(委托给组件最外层的元素)

通过event.target得到发生事件的DOM元素对象

<input onFocus={this.handleClick}/> handleFocus(event) { event.target //返回input对象 }

强烈注意

组件内置的方法中的this为组件对象

在组件中自定义的方法中的this为null
1.强制绑定this

this.change = this.change.bind(this); 2.箭头函数(ES6模块化编码时才能使用)

state属性

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

初始化状态:

constructor (props) { super(props) this.state = { stateProp1 : value1, stateProp2 : value2 } }

读取某个状态值:

this.state.statePropertyName

更新状态->组件界面更新

this.setState({ stateProp1 : value1, stateProp2 : value2 }) 组件的生命周期

组件的三个生命周期状态:

Mount: 插入真实 DOM

Update: 被重新渲染

Unmount: 被移出真实 DOM

React 为每个状态都提供了两种勾子(hook)函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用:

componentWillMount()

componentDidMount(): 已插入页面真实DOM,在render之后才会执行

componentWillUpdate(object nextProps,object nextState)

componentDidUpdate(object prevProps,object prevState)

componentWillUnmount()

生命周期流程:

第一次初始化渲染显示:render()

constructor(): 创建对象初始化state

componentWillMount(): 将要插入回调函数

render(): 用于插入虚拟DOM回调函数

componentDidMount(): 已经插入回调函数.在此方法中启动定时器,绑定监听,发送Ajax请求

每次更新state:this.setSate()

componentWillUpdate(): 将要更新回调函数

render(): 更新,重新渲染

componentDidUpdate(): 已经更新回调

删除组件

ReactDOM.unmountComponentAtNode(div):移除组件

componentWillUnmount():组件将要被移除回调

常用的方法

render(): 必须重写,返回一个自定义的虚拟DOM

constructor(): 初始化状态,绑定this(可以箭头函数代替)

componentDidMount(): 只执行一次,已经在DOM树中,适合启动,设置一些监听

注意

一般会在componentDidMount() 中:开启监听,发送ajax请求

可以在componentWillUnmount() 做一些收尾工作:停止监听

生命周期还有一个方法:componentWillReceiveProps()

React的函数式编程

函数式编程: 结构化编程的一种,主要思想是把运算过程尽量写成一系列嵌套的函数调用

声明式编程: 只关注做什么,而不关注怎么做(流程),类似于填空题,数组中常见声明式方法:map() , forEach() ,find() ,findIndex()