React——state、props、生命周期、组件嵌套

理解了框架的原理后，那么使用框架就迫在眉睫了，如果只懂原理不知道怎么使用，是不是有些半吊子感觉，整个的思路就是这样– 原理+简单Demo（注重理解函数的api）+实战 本节讲的就是简单的Demo，废话不多说 使用React的最基本的几个概念： 首先明白：React注重view层

state

React把页面划分为一个个组件，每一个组件的view展示都是由state决定的，如果没有state，就是无状态组件，通过配置的方式展示view（这是react最推崇的）。 无状态组件：就是调用组件、出来一个view，最理想的 有状态组件： 初始化：this.state={config：conf} 修改状态：this.setState({config:conf});//必须以键值对方式赋值，否则不会渲染组件，如果使用this.state.config=conf,不会生效

props

props主要用来在组件之间传递消息，父组件向子组件传递数据，那么子组件怎么向父组件传递数据呢？父组件向子组件传递一个回调函数，当然随着组件层级的增加，不同的组件之间传递数据会显得比较麻烦，那么最好的方式就是观察者模式，在这里就不做赘述了，主要讲解props的使用 class Parent extends React.Component{ render(){ return <Child msg="父亲给儿子的问候">； } } class Child extends React.Component{ render<div{this.props.msg}/> }

生命周期

React的生命周期，简单来说就是定义了组件的整个活动过程，**从过程的角度来看就是怎么样组件什么时候会调用什么函数。** 让我们来看看有哪些大名鼎鼎的API 组件装载机阶段： constructor() //构造函数最开始调用 componentWillMount() render() componentDidMount() 更新组件阶段： componentWillReceiveProps() shouldComponentUpdate() componentWillUpdate() render() componentDidUpdate() 移除组件： componentWillUnmount() 其他API setState() forceUpdate() defaultProps displayName

下面通过一个简单的例子来说明整个流程：

import React from 'react' import ReactDOM from 'react-dom' export default class Demo extends React.Component{ constructor(props){ super(props); console.log("....Constructor!...."); console.log(this.props.color); this.state={ state:'start' }; } componentWillMount(){ console.log("....Will Mount!...."+this.state.state); } render(){ console.log("....Render!...."+this.state.state); return <div><button onClick={this.cl.bind(this)}>Demo</button> <button onClick={this.force.bind(this)}>Force</button></div> } componentDidMount(){ console.log("....Mount Done!...."+this.state.state); } componentWillReceiveProps(){ console.log('Receive new color.....'+this.props.color); console.log("....Will receive props!...."+this.state.state); } shouldComponentUpdate(){ console.log("....Should update!...."+this.state.state); return true; //默认返回true，返回false将不会渲染组件 } componentWillUpdate(){ console.log("....Will Update!...."+this.state.state); } componentDidUpdate(){ console.log("....Did update!...."+this.state.state); } componentWillUnmount(){ console.log("Will mount"+this.state.state); } cl(){ this.setState({ state:"change" }) } force(){ this.setState({ state:"force" }) this.forceUpdate(); } } //如果不传递参数进来就是color default Demo.defaultProps = { color: 'color default' } //将组件渲染到界面上去 ReactDOM.render(<Demo/>,document.getElementById('main')); //如果传递参数，color default就变成 new color ReactDOM.render(<Demo color="new color"/>,document.getElementById('main'));

输出结果为： 运行结果如图所示：

其实，简单来讲，React的生命周期，提供给用户在各个阶段，可以操作控件的接口，类似Java中的切面编程（比喻可能不是很确切。。。。），随时插入。

嵌套组件的生命周期

import React, { Component } from 'react'; export default class FatherUpdate extends Component { constructor(props) { super(props); this.state = { father: 0 } } componentDidMount() { console.log('father mount') } componentDidUpdate() { console.log('father update') } handleFatherClick = () => { this.setState({ father: this.state.father + 1 }); } render() { return <div> <button onClick = {this.handleFatherClick}> father-son </button> <SonUpdate/> </div> } } export class SonUpdate extends Component { constructor (props) { super(props); this.state = { son: 0 } } componentDidMount() { console.log('son mount') } componentDidUpdate() { console.log('son update') } handleSonClick = () =>{ this.setState({ son: this.state.son + 1 }); } render() { return <button onClick = {this.handleSonClick}> test-son </button> } }

上面这个组件，就是一个父组件，嵌套一个子组件，先上运行结果 可以看到，子组件先装载，后面父组件再装载完成，很好理解啊，如果儿子没完成，父怎么能完成？ 那么，当我们更新父组件的状态，子组件会不会更新？ 运行结果： 可以看到， 父组件更新后，子组件也更新了。 但是当子组件更新的时候，只更新了子组件本身。 为什么要这么设计？ 你需要明白，React本身是组件嵌套生成的，而不是通过继承实现的，继承的原则是替换原则（子类出现的地方，父类可以出现），但是组件的思想是，管好自己的一片地。