从VUE转向react 第一天

入手原因

• 新公司需要。
• 在之前找工作过程中感觉到react确实在国内的使用场合更多一点。
• 学习嘛，不能停。

环境搭建

用webpack一套标准的搭建流程，具体搭建还是跟随着官方文档中的自己构建工具链来一步一步搭起来的。大致分为几个步骤
1. 初始化npm和git（如果需要）；
2. 构建大致文件结构；
3. 配置babel，安装babel下的core、cli、preset-env、preset-react，配置 .babelrc 文件
4. 配置webpack，这里从实际项目出发，发现普遍的做法是将webpack内容中的不同部分拆分出一个单独的文件夹。方便管理和编写很多。
5. 安装react，react-dom
6. 配置热更新，对应的包叫做react-hot-loader
7. 写config中的script，配置开发指令。

基础学习

基础组件方面没有太多难点。有几个需要注意的点在这里列一下。

• JSX就是一个可以带着HTML标签的表达式，其中HTML标签内再引用变量需要用{}括起来。
• 元素渲染是用ReactDOM.render()来执行的，传入参数分别是渲染成什么和渲染到哪。
• 函数就可以作为组件，当然类更好（之后因为有hooks的存在，所以推荐还是用函数组件）
• 数据是单向流动的，这个和vue一样，数据通过props从父到子传播。
• 状态state之前一般定义在class上（现在有hooks了）基本上是在构造函数的时候新建this.state属性，给这个组件增加class。修改属性要调用this.setState()来修改。
• 生命周期：他的生命周期一般叫做DidMount、Unmount等。
• 事件处理：记着要在构造函数中新增绑定bind来确保调用时候的this指向。
• 条件渲染：因为这里很多都是js直接写，所以通过return不同值直接改变会返回的内容。因此可以用一些短路（&&）或者三元运算符等进行操作。return null会默认不渲染，但是他的生命周期还是会走一遍。
• 列表用map去遍历，挨个返回元素就好。注意，每个列表具体项都应该对应一个key以便tree shaking
• 表单：还要再看。
• 状态提升：从来都是用传入的props来作为数据来源，用来使用统一的数据来源。
• 组合继承：可以通过props.children来获取组件被组件包裹的子组件。

hooks应用

今天明确的会用了两个hooks

1. 用来修改state的自带hook stateHook，他的存在就是为啥现在可以不用class去写了。再函数组件内可以调用useState(default)来新建这个组件的state，返回第一个数属性名，第二个是设置属性方法。
2. context 这个是一个全局的状态。其实之后再reduce里面还会多次看到这个钩子。新建context是使用React.createContext来创建，他会产生一个新的全局state对象。在<myContext.Provider>中包裹的内容会在其值改变的时候重新渲染，也可以通过组件函数的.contentType来挂载给class组件。组件内使用context需要调用对应的context（就是调用create的时候的返回值）