React分享

2017-09-07 本文已影响0人哎嘿沁

React是一个专注提供清晰、简洁、灵活的View层解决方案的库
特点：轻
组件化的开发思路

React组件

React组件的构建方式

用React.createClass构建组件是 React 最传统、也是兼容性最好的方法。

const Button = React.createClass({
  getDefaultProps() {
    return {
      color: 'blue',
      text: 'OK',
    };
  },
  render() {
    const { color, text } = this.props;
    return (
      <button className={`btn btn-${color}`}>
         <em>{text}</em>
      </button>
    );
  }
});

用ES6 标准的类语法的方式来构建。官方推荐。

class Greeting extends React.Component {
  static defaultProps = {
    name: 'World',
  }; 
  static propTypes = {
    name: React.PropTypes.string.isRequired,
  };
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

使用无状态函数构建

function Button({ color = 'blue', text = 'OK' }) {
  return (
    <button className={`btn btn-${color}`}>
      <em>{text}</em>
    </button>
  );
}

组件本身即上面两种 React 组件构建方法中的 render 方法。

组件内的属性和状态

props

我们可以通过this.props.xx的形式获取组件对象的属性，对象的属性可以任意定义，但要避免与JavaScript关键字冲突。
组件可以定义初始值，自己不可更改props属性值，只允许从父组件中传递过来：

    // 父组件
    class ParentComponent extends React.Component{
        render(){
            return(<Child name="name">);
        }
    }
    
    // 子组件
    class Child extends React.Component{
        render(){
            return(<Text>{this.props.name}</Text>);
        }
    }

父组件向子组件传递name="name"的props属性，在子组件中使用this.props.name引用此属性。
属性类型prop type和默认属性 default prop可以通过类中的 static来声明：

  class Demo extends React.Component {
       // 默认props
      static defaultProps = {
        autoPlay: false,
        maxLoops: 10,
      }
       // propTypes用于验证转入的props
      static propTypes = {
        autoPlay: React.PropTypes.bool.isRequired,
        maxLoops: React.PropTypes.number.isRequired,
        posterFrameSrc: React.PropTypes.string.isRequired,
      }
      state = {
        loopsRemaining: this.props.maxLoops,
      }
  }

遍历对象的属性
this.props.children会返回组件对象的所有属性。
React 提供一个工具方法 React.Children 来处理 this.props.children 。我们可以用 React.Children.map或React.Children.forEach 来遍历子节点。

var NotesList = React.createClass({
  render: function() {
    return (
      <ol>
      {
        React.Children.map(this.props.children, function (child) {
          return <li>{child}</li>;
        })
      }
      </ol>
    );
  }
});
ReactDOM.render(
  <NotesList>
    <span>hello</span>
    <span>world</span>
  </NotesList>,
  document.body
);

state

组件用来改变自己状态的属性，通常使用setState({key:value})来改变属性值触发界面刷新，不能使用this.state.xxx来直接改变。典型的场景是在接收到服务器返回的新数据，或者在用户输入数据之后。

对于经常改变的数据且需要刷新界面显示，可以使用state。
对于不需要改变的属性值可以使用props。

React数据流

在 React 中，数据是自顶向下单向流动的，即从父组件到子组件。

props是由父组件传递给子组件的。
state是子组件内部的维护的数据。

Virtual Dom

React 最大的特色是当View层在渲染的时候,它不会直接从模板里面去构建一个DOM节点. 首先, 它创建一些暂时的, 虚拟的 DOM, 然后和真实的DOM还有创建的Diffs一起做对比, 然后才决定需不需要渲染。

JSX
diff算法

React生命周期

生命周期：广义上 => 各种客观事物的阶段性变化及其规律。生命体的周期是单一，不可逆，而软件开发的生命周期会根据方法的不同在完成前重新开始。

React 组件的生命周期可以分为挂载(Mounting)、渲染(Updating)和卸载(Unmounting)这几个阶段。
当渲染后的组件需要更新时，重新去渲染组件，直至卸载。

image.png

Mounting：初始化阶段（已插入真实 DOM）

初始化阶段可以使用的函数：
getDefaultProps: 只调用一次，实例之间共享引用
getInitialState: 初始化每个实例特有的状态
componentWillMount: render之前最后一次修改状态的机会。如果在这个方法内调用setState,render()将会感知到更新后的state，将会执行仅一次，尽管state改变了。
render: 只能访问this.props和this.state，只有一个顶层组件，不允许修改状态和DOM输出
componentDidMount: 成功render并渲染完成真实DOM之后触发，可以修改DOM

调用顺序
当组件在客户端被实例化，第一次被创建时，以下方法依次被调用：

getInitialState
componentWillMount
render
componentDidMount

Updating ：更新
componentWillReceiveProps(object nextProps)在组件接收到新的 props 的时候调用。在初始化渲染的时候，该方法不会调用。
用此函数可以作为 react 在 prop 传入之后， render() 渲染之前更新 state 的机会。老的 props 可以通过 this.props 获取到。在该函数中调用 this.setState() 将不会引起第二次渲染。
shouldComponentUpdate(object nextProps, object nextState): 在接收到新的 props 或者 state，将要渲染之前调用。
该方法在初始化渲染的时候不会调用，在使用 forceUpdate 方法的时候也不会。如果确定新的 props 和 state 不会导致组件更新，则此处应该返回 false。
心得：重写此方法你可以根据实际情况，来灵活的控制组件当 props 和 state 发生变化时是否要重新渲染组件，也是优化性能的一项手段。
componentWillUpdate(object nextProps, object nextState)：在接收到新的 props 或者 state 之前立刻调用。
在初始化渲染的时候该方法不会被调用。使用该方法做一些更新之前的准备工作。
注意：你不能在该方法中使用 this.setState()。如果需要更新 state 来响应某个 prop 的改变，请使用 componentWillReceiveProps。
componentDidUpdate(object prevProps, object prevState): 在组件的更新已经同步到 DOM 中之后立刻被调用。
该方法不会在初始化渲染的时候调用。使用该方法可以在组件更新之后操作 DOM 元素。
Unmounting：移除
componentWillUnmount：在组件从 DOM 中移除的时候立刻被调用。
在该方法中执行任何必要的清理，比如无效的定时器，或者清除在componentDidMount 中创建的 DOM 元素。

Redux

react-redux库提供了一个组件和一个 API 帮助 Redux 和 React 进行绑定，
一个是 React 组件 <Provider/> ，一个是 connect()。
<Provider/> 接受一个 store 作为props，它是整个 Redux 应用的顶层组件，
connect() 提供了在整个 React 应用的任意组件中获取 store 中数据的功能。
它们一个将组件与redux关联起来，一个将store传给组件。组件通过dispatch发出action，store根据action的type属性调用对应的reducer并传入state和这个action，reducer对state进行处理并返回一个新的state放入store，connect监听到store发生变化，调用setState更新组件。

流程：
一、Provider组件接受redux的store作为props，然后通过context往下传。
二、connect函数收到Provider传出的store，然后接受三个参数mapStateToProps，mapDispatchToProps和组件，并将state和actionCreator以props传入组件，这时组件就可以调用actionCreator函数来触发reducer函数返回新的state，connect监听到state变化调用setState更新组件并将新的state传入组件。
connect(state => state, action)(Component);