17-7-24-react入门

先说明下为什么说好每天一更，周五周六周日都没有更新。因为在周五的时候，上司主动找我谈了转正后的工资4-4.5K。
本来想好是6K的，后来打听了一圈公司的小伙伴，都是5-5.5，我就把自己定到了5K。
万万没想到，只有4-4.5， 估计是4.5然后扣掉各种以后，就4K。
也不是说不能活，就是觉得和周围的小伙伴相比，显得有点低。所以心情有点低落。
这两天也都在玩，就当放松心情了。
自己也去网上找了一圈，发现最近工作机会有点少，加上在公司里搞得杂七杂八，没有什么是精通的了，所以还是先好好待着吧。
既然选择待着，就好好干活吧~ 下班自己再学点其他的，增加就业机会。
然后今天早上依然不太想去上班，就又请假了一天。不过发现在家也没事干，还是学习了React。
因为公司项目未来即将要用到。所以先学习一下。稍后分享就分享react方面的知识。

 

# react的入门
react就是一个js框架，它采取组件化的结构，实现页面局部的快速加载，而不用每次都刷新整个页面。
简单的说，就是 很好用！
而且适配pc和移动端。一套代码，多地方使用，提升效率。

1. 首先安装npm。
2. `npm init`
2. 使用npm安装webpack（这里的react都是使用webpack来管理的，公司是使用gulp来管理，虽然还没深入研究。明天去研究研究。）
3. `npm install --save react react-dom`
4. 基本就可以开始了，这里不讲文件的分布，就讲下react的大致写法。

1. `import React from 'react' //(`首先是引用react)
2. 

export default class BodyIndex extends React.Components
render(){
return(
<h1>我是body部分</h1>
)
}

// 这里是写一个class部分（ES6的写法，由于越来越流行ES6，所以都采取ES6的写法），继承React的Components
// 里面的render是react的语法，即准备返回什么，return里面是要返回到页面上的内容。
3. 在return中也难免会有一些注释，如果直接使用//来注释，则会造成错误，所以要使用{/* ... */}来注释。
4. 在BodyIndex的父级js中，如果要使用BodyIndex，则需要使用`import BodyIndex from 'bodyIndex的文件路径'`
5. 然后在return中 直接使用`<BodyIndex />`即可完美引用,当然前提bodyindex需要export出去。
6. react有几个加载状态`componentsDidMount`,`componentsBeforeMount`都可以在这里面设置自己需要的事件。
7. 当然，除了几个状态以外，react也有独立的state和props。state即状态，可以在一开始的时候设置`this.state = {id: 111}`
然后在使用的时候，如果要改变state可以使用`this.setState({id: 222})`重新赋值来覆盖掉原来的即可。
8. props是父子页面之间互相传递的方式。在父页面中可以使用`<BodyIndex userid={123}`来将userid=123传给bodyindex页面，
然后在bodyIndex的页面中，使用this.props.userid就能来获取父页面发来的数据了。
9. 在当前页面中写function以后，如果在比如input-button的标签中调用，需要书写如下`onClick={this.functionName.bind(this,[args])}`的形式，
其中args为可选，如果填写会发送给function当做参数，这是ES6的语法，需要记住。
10. 从父页面传来的数据在使用前可以先进行验证，这些都是react里面有现成方法的，比如userid为数字
`BodyIndex.propTypes = {userid : React.PropTypes.number}`,这句话写在bodyindex页面即可进行验证。
11. 从父页面传来的数据如果没有填写，自己页面填写了`this.props.userid`也不会报错，只是输出空数据。
当然，我们也可以写一些默认的值来避免这些尴尬，如果有传过来，就使用传过来的值，没有就使用默认值
`const defaultPrps = {userid : 001}; BodyIndex.defaultProps = defaultProps`.
12. 如果想从父页面(A)向孙子页面(C)传递（隔着一个中间页面(B)传值）,不需要很复杂的写好几个`this.props.XX = XXOO`，
可以直接在B页面中，C页面的代码处写`{...this.props}`就能将A的页面传来的数据给C。
13. 后面就是关于CSS部分，明天再来聊，拜拜啦。

转载于:https://www.cnblogs.com/by330326/p/7231761.html