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

 1 // 这样就相当于一个普通组件了
 2 const Test = (props) => <div>测试组件</div>
 3 
 4 export default class Main extends Component {
 5   render () {
 6     return (
 7       <Test></Test>
 8     )
 9   }
10 }

　　容器组件一般的结构：

 1 // 容器组件
 2 export default class Main extends Component {
 3   // 构造函数
 4   constructor (props) {
 5     super(props)
 6 
 7     // 初始化组件数据
 8     this.state = {}
 9   }
10 
11   // 默认传值
12   static defaultProps: {}
13 
14   // 生命周期
15   // 请求数据
16   componentDidMount () {}
17 
18   // 事件数据
19   handleSome () {}
20 
21   // 渲染
22   render () {
23     return (
24       <Test></Test>
25     )
26   }
27 
28 }

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

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

 1 const element = (
 2   <h1 className="greeting">
 3     Hello, world!
 4   </h1>
 5 );
 6 
 7 const element = React.createElement(
 8   \'h1\',
 9   {className: \'greeting\'},
10   \'Hello, world!\'
11 );
12 
13 /**
14  *   <h1 className="greeting">
15  *       Hello, world!
16  *   </h1>
17  *   这样的模板片段等同于
18  */
19 const element = {
20   type: \'h1\',
21   props: {
22     className: \'greeting\',
23     children: \'Hello, world\'
24   }
25 };

　　2.this.props.children

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

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

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

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

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

　　5.关于react的列表渲染

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

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

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

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

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

 1 // 祖先组件
 2 class Parent extends Component {
 3   getChildContext () {
 4     return {
 5       text: \'祖先组件中的文本\'
 6     }
 7   }
 8 
 9   render () {
10     const Parent = this
11     return (
12       <div>
13         <ContextTest></ContextTest>
14       </div>
15     )
16   }
17 }
18 
19 Parent.childContextTypes = {
20   text: Proptypes.string
21 }
22 
23 // 中间件
24 const ContextTest = (props) => {
25   return (
26     <div>
27       <Child></Child>
28     </div>
29   )  
30 }
31 
32 // 底层组件
33 // class Child extends Component {
34 //   render () {
35 //     return (
36 //       <div>
37 //         {this.context.text}
38 //       </div>
39 //     )
40 //   }
41 // }
42 
43 const Child = (props, context) => {
44   return (
45     <div>
46       {context.text}
47     </div>
48   )
49 }
50 
51 Child.contextTypes = {
52   text: Proptypes.string.isRequired
53 }