react 的一些心得

react的功能其实很单一，主要负责渲染的功能, 支撑起react变得更加强大的是它的生态系统

react只负责ui渲染，想要做好一个项目，往往需要其他库和工具的配合，比如用redux来管理数据，react-router管理路由，react已经全面拥抱es6，所以es6也得掌握，webpack就算是不会配置也要会用，要想提高性能，需要按需加载，immutable.js也得用上，还有单元测试。

React的组件化: 封装 复用 单一职责原则 UI与函数组件分离 通过props进行数据流通

React的 Diff算法: diff => (oldVnode, newVnode) 对比新旧两个虚拟dom树
进行逐层的比较，如果发现对应的节点是不同的，那就直接删除旧的节点以及它所包含的所有子节点然后替换成新的节点。如果是相同的节点，则只进行属性的更改。

组件的生命周期
getDefaultProps() 设置默认的props，也可以用dufaultProps设置组件的默认属性。
componentWillMount() 组件初始化时只调用，以后组件更新不调用，整个生命周期只调用一次，此时可以修改state。
render() react最重要的步骤，创建虚拟dom，进行diff算法，更新dom树都在此进行
componentDidMount() 组件渲染之后调用

componentWillReceivePorps(nextProps) 组件初始化时不调用，组件接受新的props时调用
shouldComponentUpdate(nextProps, nextState) react性能优化非常重要的一环。组件接受新的state或者props时调用，我们可以设置在此对比前后两个props和state是否相同，如果相同则返回false阻止更新
componentWillUpdate(nextProps, nextState) 组件初始化时不调用，只有在组件将要更新时才调用
render()
componentDidUpdate() 组件更新完成后调用

componentWillUnmount() 组件将要卸载时调用，一些事件监听和定时器需要在此时清除

React-Router路由

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
// import { Router, Route, Link, Switch } from 'react-router';
import {
  HashRouter,
  Route,
  Link,
  Switch
} from 'react-router-dom';
 
class App extends Component {
  render() {
    return (
      <div>
        <h1>App</h1>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/inbox">Inbox</Link></li>
        </ul>
        {this.props.children}
 
      </div>
    );
  }
}
 
const About = () => (
  <div>
    <h3>About</h3>
  </div>
)
 
const Home = () => (
  <div>
    <h3>Home</h3>
  </div>
)
 
const Message = ({ match }) => (
  <div>
    <h3>new messages</h3>
    <h3>{match.params.id}</h3>
  </div>
)
 
const Inbox = ({ match }) => (
  <div>
    <h2>Topics</h2>
    <Route path={`${match.url}/messages/:id`} component={Message}/>
 
  </div>
) 
 
ReactDOM.render(
  (<HashRouter>
    <App>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/inbox" component={Inbox} />
    </App>
  </HashRouter>),
  document.getElementById('root')
);

Redux
react-redux提供了connect和Provider两个好基友，它们一个将组件与redux关联起来，一个将store传给组件。组件通过dispatch发出action，store根据action的type属性调用对应的reducer并传入state和这个action，reducer对state进行处理并返回一个新的state放入store，connect监听到store发生变化，调用setState更新组件，此时组件的props也就跟着变化
值得注意的是connect，Provider，mapStateToProps,mapDispatchToProps是react-redux提供的，redux本身和react没有半毛钱关系，它只是数据处理中心，没有和react产生任何耦合，是react-redux让它们联系在一起。

赏

1分也是爱

微信