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 }