学习《深入react技术栈》-- 数据流和生命周期

1. React数据流

React数据流是自上向下单向流动，即父组件到子组件。

state与props是react组件中重要的概念。如果顶层组件初始化props，那么react会向下遍历整棵组件树，重新尝试渲染搜索相关的子组件。而state只关心每个组件自己内部的状态，这些状态只能在组件内部改变。

把组件看成一个函数，那么它接受了props作为参数，内部由state作为函数的内部参数，返回一个Virtual DOM的实现。

state

在react没有结合redux框架前，它自身也同样可以管理组件的内部状态，这类状态统一称为state。

当组件内部使用库内置的setState方法时，该组件会尝试重新渲染。我们可以这样理解，因为我们改变了内部状态，组件需要更新。

@H_403_30@import React,{Component} from 'react' class Counter extends Component { constructor(props) { supre(props) this.state = { count: 0 } } handleClick(e) { e.preventDefault() this.setState({ count: this.state.count + 1 }) } render() { return ( <div> <p>{this.state.count}</p> <button onClick={this.handleClick.bind(this)}></button> </div> ) } }

在react中常常在事件处理方法中更新state，如上述计数器。这样就可以把组件内状态封装在实现中。

setState是一个异步方法，一个生命周期内所有的setState方法会合并操作。

props

props是react用来让组件之间互相联系的一种机制。react的单向数据流，主要的流动管道就是props。props本身是不可变的。当我们试图修改props的原始值时，react会报出类型错误的警告。如下，我们在constructor中修改了props的值。

react为props同样提供了默认配置，通过defaultProps静态变量的方式来定义。当组件被调用的时候，默认值保证渲染后始终有值。

子组件props

在react中有一个重要且内置的prop--children，它代表组件的子组件集合。children可以根据传入子组件的数量来决定是否是数组类型。this.props.children 的值有三种可能：如果当前组件没有子节点，它就是 undefined ;如果有一个子节点，数据类型是 object ；如果有多个子节点，数据类型就是 array。

React.Children是react官方提供的一系列操作children的方法。它提供map，forEach，count等函数，可以为我们处理子组件提供便利。

用function props与父组件通信

可以通过props传递函数给子组件，通过子组件调用和父组件进行信息交互。

propTypes

propTypes用户桂法props的类型与必须的状态。如果组件定义了propTypes，那么在开发环境下，就会对组件的props值得类型做检查，如果传入的props不能与之匹配，React会在控制台进行warning。

2. React生命周期

react组件的生命周期可以根据广义定义描述，可以分为挂载，渲染和卸载这几个阶段。当渲染后的组件需要更新时，我们会重新渲染组件，直至卸载。

@H_403_30@生命周期可以分为两种： 1. 当组件在挂载或卸载的时候； 2. 当组件接收新的数据时，即组件更新时。

挂载和卸载过程

1. 组件的挂载

组件的挂载是最基本的过程，这个过程主要做组件状态的初始化：

@H_403_30@import React,{ Component,PropTypes } from 'react'; class App extends Component { static propTypes = {} static defaultProps = {} constructor(props) { supre(props) this.state = {} } componentWillMount() {} componentDidMount() {} render() { return () } }

我们可以看到propTypes和defaulProps分别代表props类型检查和默认类型。这两个属性被声明成静态属性，意味着从类外面可以对它们进行访问，例如：App.propTypes和App.defaultProps。

这里可以看到两个明显的声明周期方法。componentWillMount会在render方法之前执行，componentDidMount方法会在render方法之后执行，分别代表渲染前后的时刻。

这里没有什么特别的地方，包括读取初始state和props以及两个组件生命周期方法componentWillMount和componentDidMount，这些都只会在组件初始化时运行一次。

如果我们在componentWillMount中执行setState方法，这样是没有意义的。因为此时组件还没有渲染完毕，调用setState组件会更新state，但组件只会渲染一次。

如果我们在componentDidMount中执行setState，组件会再次更新，不过初始化过程中就渲染了两次组件。

组件的卸载

组件的卸载很简单，只有componentWillUnmount这一个卸载前状态：

@H_403_30@import React,{Component} from 'react' class App extends Component { componentWillUnmount() { } render() { return () } }

在componentWillUnMount方法中，我们常常会执行一些清理方法。

数据更新过程

更新过程指的是父组件向下传递props或者组件自身执行setState方法时发生的一系列更新动作。

@H_403_30@import React,PropTypes } from 'react'; class App extends Component { componentWillReceiveProps(nextProps) { this.setState({}) } shouldComponentUpdate(nextProps,nextState) { return true } componentWillUpdate(nextProps,nextState) { } componentDidUpdate(prevProps,prevState) { } render() { return () } }

如果组件自身的state更新了，那么会一次执行shouldComponentUpdate,componentWillUpdate,render,componentDidUpdate。

shouldComponentUpdate它接受需要更新的props和state，让开发者增加必要的条件判断，在需要的时候更新，不需要的时候不更新。

默认情况下，当props改变的时候，react会渲染所有子节点，因为shouldComponentUpdate默认返回true。

componentWillUpdate和componentDidUpdata这两个生命周期方法很容易理解，它们代表更新过程中渲染前后的时刻。此时，我们可以想到componentWillUpdate方法提供需要更新的props和state，而componentDidUpdate提供更新前的props和state。

注意：不能在componentWillUpdate中执行setState。

如果组件是由父组件更新props而更新的，那么在shouldComponentUpdate之前会执行componentWillReceiveProps方法。此方法可以作为在传入props之后，渲染之前setState的机会。

3. React与DOM

现在我们讨论下如何将组件渲染到真实的DOM上。

ReactDOM

ReactDOM中的API比较少，只有findDOMNode，unmountComponentAtNode和render。

findDOMNode

在React中只有在componentDidMount和componentDidUpdate方法中可以获取到真正的DOM元素。React提供获取DOM元素的方法有两种，其中一种就是findDOMNode：

@H_403_30@DOMElement findDOMNode(ReactComponent component)

当组件被渲染到DOM中后，findDOMNode返回该React组件实例相应的DOM节点。它可以用于获取表单的value以及用于DOM的测量。

@H_403_30@import React from 'react' import ReactDOM from 'react-dom' class App extends Component { componentDidMount() { const dom = ReactDOM.findDOMNode(this) } render() { return () } }

如果在render中返回null，那么findDOMNode也返回null。findDOMNode只对以及挂载的组件有效。

render

要把react渲染的虚拟DOM渲染到浏览器的DOM当中，就要使用render方法了。

@H_403_30@ReactComponent render( ReactElement element,DOMElement container,[function callback] )

该方法把元素挂载到container中，并返回element的实例子(即refs引用)。如果是无状态组件，render会返回null，当组件安装完毕，callback就会被调用。

当组件在初次渲染之后再次更新时，react不会把整个组件重新渲染一次，而会用它高效的DOM diff算法做局部的更新。

ReactDOM的不稳定方法

这里没怎么看，感觉用处不大就不介绍了。

refs

刚才我们描述了ReactDOM的render方法，比如我们渲染App组件到root节点下：

@H_403_30@const myAppInstance=ReactDOM.render(<App/>,document.getElementById('root')); myAppInstance.doSth();

我们利用render方法获取了App组件的实力，然后我们可以对它做一些操作。但是在组件内JSX不会返回一个组件的实例，它是一个ReactElement，只是告诉react被挂载的组件应该长什么样子:

@H_403_30@cosnt MyApp = <App />

refs是react组件中非常特殊的props，可以附件到任何组件上，字面意思理解就是reference，组件被调用时会新建一个该组件的实例。
它也可以是一个回调函数，这个回调函数会在组件被挂载后立即执行：

@H_403_30@import React,{ Component } from 'react'; class App extends Component { constructor(props){ super(props); this.handleClick = this.handleClick.bind(this); } handleClick() { if (this.myTextInput !== null) { this.myTextInput.focus(); } render() { return ( <div> <input type="text" ref={(ref) => this.myTextInput = ref} /> <input type="button" value="Focus the text input" onClick={this.handleClick} /> </div> ); } }

在这个例子，我们得到了input组件的真正实例，所以可以在按钮被按下后调用输入框focus方法。该例子把refs放到原生的DOM组件input中，我们可以通过refs得到DOM节点；如果把refs放到React组件，比如：<TextInput>，我们获得的就是TextInput的实例，因此就可以调用TextInput的实例方法。

refs同样支持字符串，对于DOM操作，不仅可以使用findDOMNode获得该组件DOM，还可以使用refs获得组件内部的DOM。

@H_403_30@import React,{ Component } from 'react' import ReactDOM from 'react-dom' class App extends Component { componentDidMount() { // myComp 是 Comp 的一个实例，因此需要用 findDOMNode 转换为相应的 DOM const myComp = this.refs.myComp; const dom = findDOMNode(myComp); } render() { return ( <div> <Comp ref="myComp" /> </div> ); } }

要获取一个react组件的引用，既可以使用this来获取当前react组件，也可以使用refs来获取你拥有的子组件的引用。

原文链接：https://www.f2er.com/react/302153.html