react使用脚手架开发

由于公司是外包性质，项目老是vue框架和react框架交替着开发，导致开发一段时间vue又把react的东西忘记了，反之亦然。所以在这里记录下react的开发简要，方便以后查询。

　　脚手架相关

　　react采用的是自己开发的脚手架：create-react-app，全局安装，然后键入dos命令：create-react-app （项目文件夹） 即可初始化react脚手架项目包，但是注意下载源和npm版本

过低都会造成依赖模块丢失或者下载不了的问题，建议源切换为国外的。这里推荐一款npm下载源管理的工具： nrm（具体使用方法：https://www.npmjs.com/package/nrm）

　　es6相关

　　由于项目大部分都是采用es6~es7语法开发了，react关于es6的语法 ： https://babeljs.io/blog/2015/06/07/react-on-es6-plus，兼容性就找babel-polyfill吧

　　react入门相关

　　react中的组件分为普通组件和容器组件（我理解为业务组件），普通组件只负责简单的数据渲染，不做逻辑处理，最简单的组件可以这样写：

// 这样就相当于一个普通组件了
const Test = (props) => <div>测试组件</div>

export default class Main extends Component {
  render () {
    return (
      <Test></Test>
    )
  }
}

　　容器组件一般的结构：

// 容器组件
export default class Main extends Component {
  // 构造函数
  constructor (props) {
    super(props)

    // 初始化组件数据
    this.state = {}
  }

  // 默认传值
  static defaultProps: {}

  // 生命周期
  // 请求数据
  componentDidMount () {}

  // 事件数据
  handleSome () {}

  // 渲染
  render () {
    return (
      <Test></Test>
    )
  }

}

　　跟着说react开发中要注意的地方：

　　1.jsx是一种js的扩展语法，可以理解为具有模板能力和js所有功能的组。JSX 表达式就变成了常规的 JavaScript 对象，Babel将jsx编译的例子：

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

/**
 *   <h1 className="greeting">
 *       Hello, world!
 *   </h1>
 *   这样的模板片段等同于
 */
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world'
  }
};

　　2.this.props.children

　　这个东西我的理解为一个插槽，在组件传值的时候，容器组件包含的组件。

　　3.获取dom，和vue的$refs索引一个用法，做个备忘

　　4.proptypes校验props，是否必须存在，为什么类型

　　但是react15.5版本之后，proptypes成为了一个单独的模块，所以要先下载依赖 prop-types再去使用

// PropTypes用于验证props的传值
Test.propTypes = {
  name: Proptypes.string.isRequired
}

 　　5.关于react的列表渲染

　　react的列表渲染，必须向子组件传递一个key的props。官方的解释是：React 使用这个 key 去比较原来的树的子节点和之后树的子节点。我的理解为，方便dom的索引，提高渲染效率，如果没有这个key则会去比较两棵dom树。

　　注：key的声明必须在使用组件的时候

// key的取值一般为数据中的索引值index
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number, index) =>
  <li key={index}>
    {number}
  </li>
);

 　　6.利用context进行越级组件传递props

　　使用context可以获取到祖先元素中的数据，避免多层传递的麻烦。

// 祖先组件
class Parent extends Component {
  getChildContext () {
    return {
      text: '祖先组件中的文本'
    }
  }

  render () {
    const Parent = this
    return (
      <div>
        <ContextTest></ContextTest>
      </div>
    )
  }
}

Parent.childContextTypes = {
  text: Proptypes.string
}

// 中间件
const ContextTest = (props) => {
  return (
    <div>
      <Child></Child>
    </div>
  )  
}

// 底层组件
// class Child extends Component {
//   render () {
//     return (
//       <div>
//         {this.context.text}
//       </div>
//     )
//   }
// }

const Child = (props, context) => {
  return (
    <div>
      {context.text}
    </div>
  )
}

Child.contextTypes = {
  text: Proptypes.string.isRequired
}