react 笔记汇总系列

学习react 已经有一段时间，现将基本知识点以及碰到的问题汇总起来，方便以后查阅。第一篇在CSDN的处女座博客！

基本知识点：

1. Facebook 13年开源的全新的函数式的开发框架，使用人数最多的前端开发框架, 在大版本** > 16**的版本被称之为 react fiber，在性能以及底层的算法都有很大的提高，快速了解前端技术在全球范围的发展。可以与其他框架并存，比如jquery，react 只作用于比如div#root，其他地方是不作用的，高效的diff算法，最小化页面重绘。

2. 技术选型：一般复杂度比较高的使用 react 更加灵活。 面向c端的复杂度不是很高的一般使用vue来开发，当然vue也可以开发大型项目，相比而言。vue 实现了更多的api,更加灵活。具体选用什么框架，还是需要根据具体的实际项目选型以及驾驭能力来参考。

技术列表：

• create-react-app
• 组件化思维
• JSX 并不是真实的DOM,这一点理解起来很重要
• 开发调试工具
• 虚拟DOM
• 生命周期
• react-transition-group
• redux
• antd
• ui 容器组件
• 无状态组件
• redux-thunk
• redux-saga
• styled-components
• imuutable.js
• redux-immutable
• axios

3. yarn 的使用方法 : 全新的一代包管理公司，facebook开发的，速度快，简洁的输出，更好的语义化，安装版本统一，安全

cnpm install -g yarn 
yarn init
yarn add 【yarn add react-router 安装某一个组件】
yarn remove[npm uninstall]
yarn install /yarn  [ npm install  ]

yarn eject  直接暴露配置文件

细节知识##

1： React 定位是视图层的框架

 import React from 'react'   // 负责jsx 编译
 import React , { PureComponent, Component } from 'react';
  

上面代码中 Component == React.Component *** ，那么什么是PureComponent* ？

React15.3中新加了一个 PureComponent 类，顾名思义， pure 是纯的意思， PureComponent 也就是纯组件，取代其前身 PureRenderMixin , PureComponent 是优化 React 应用程序最重要的方法之一，易于实施，只要把继承类从 Component 换成 PureComponent 即可，可以减少不必要的 render操作的次数，从而提高性能，而且可以少写 shouldComponentUpdate 函数，节省了点代码。

解释： 当组件更新时，如果组件的 props 和 state 都没发生改变， render 方法就不会触发，省去 Virtual DOM 的生成和比对过程，达到提升性能的目的。具体就是 React 自动帮我们做了一层浅比较

2：组件必须大写开头，jsx 注释写法： { /注释内容/ }

3：输出解析html标签： dangerouslySetInnerHTML={{__html: item}} item 是具体的html字符串的变量

4：label ->htmlFor lable 标签身上 for属性的替代

5：setState() 在新版的React之中不推荐使用对象的形式来更新，而是更加推荐使用异步的方式来更新，会返回是一个函数，参数是之前的state，主要目的是为了提升性能。

 // setState 写成异步的形式 里面是一个函数 函数的参数 prestate 表示的是修改数据之前的的数据   
  this.setState( (prestate)=>({  
      list: [...prestate.list,vals]  //prestate.inputval 
  }), ()=>{
     // 执行完成的回掉
   })

6：单项的数据流，子组件不能修改父组件的值，跟vue是一样的 只能使用，不能改变. 子组件一般使用的是父组件的某个值的拷贝

itemDeletesfn(index){
      let list = [...this.state.list] // 拷贝一份原来的数据
       list.splice(index,1)
       this.setState({list})  // es6的简写
  }

7： **传值：**子组件传值给父组件，首先需要父组件给子组件传递一个方法，子组件拿到这个方法以后再调用一个自身的方法传递参数，父组件在捕获到这个方法，最终方法的执行还是在父组件里面执行的。

 父组件： 
 <div className="anikin">
    <label htmlFor="inerinput">输入你的dodolist内容吧：</label>
      <input id="inerinput" ref="ainputs" value={this.state.inputval}  onChange={this.myonchange} onKeyDown={this.handelClick} style={{color:'#333',paddingLeft:'15px'}}  className="myinput" /> {/*onChange 实现 而不是通过dom操作实现*/}     
     <Todoitem list={this.state.list} itemDeletesfn={this.itemDeletesfn}  />
</div>

子组件
class Todoitem extends Component { 
   deleteItems(v){ 
      this.props.itemDeletesfn(v)
   }
   // 拆分出来 
   todofnlist(){    
      const {test} = this.props
   	  return(
         this.props.list.map((item,index)=>{
  			    return(<li 
                    key={index}
                    onClick={this.deleteItems.bind(this,index)}>{test}--{item}</li>)
      		})
   	  )
   }

8： PropTypes 默认继承带了这个包
**校验：**写在组件的最外面 而不是组件的里面，建议组件开发的时候写上类型，这样子就能限制传递进来的值的类型, 查看官网，还有很多的类型 比如 或等

 import PropTypes from 'prop-types'  // 引入这个包 
 // 对当前组件里面传递过来的数据进行校验
   Todoitem.propTypes  ={
      test:PropTypes.string.isRequired,   // number 必穿
      list:PropTypes.array, // 提供或者的
      itemDeletesfn: PropTypes.func
   }
    // 默认的属性值
   Todoitem.defaultProps = {
     test:'close'
   }

9： react 函数式编程优势：好处是容易维护，而且容易进行前端自动化测试。

10：props，state 与 render 函数的关系
当组件的props、state发生变化的时候，render 函数就会执行，因为页面是render渲染的，所以页面就会发生变化。当父组件的render 重新执行的，子组件的render也会执行一次。

11: 虚拟DOM vue 里面的虚拟DOM 跟react 里面是一样的

核心原理： jsx -- js对象【底层是createElement生成元素】 -- 真实的dom插入页面中
class Todolist extends Parents{
  render(){
    // ==== return (<div><span>content in inner</span></div>)
    return React.createElement('div',{},React.createElement('span',{},''content in inner'')) // 第二个参数是这个元素身上的属性
  }
}    

diff 算法里很重要的一点就是同层进行比较，只要不同立马放弃，是相比于算法性能来说还是很优化。key值的重要性，key值是比较中的标志位，最好不要用index来存。

为什么让开发跨终端应用RN这些成为可能，就是在第三步生成dom的时候让其生成原生的组件，原生应用不识别dom，但是识别js对象，这就是主要原因。

12: Ref 新的api中 ref是需要一个箭头函数，随便传递一个参数
<input ref={(input)=>{this.input=input} />使用的时候直接使用 this.input，本身是异步的函数，如果操作 ref 属性就需要写到异步执行完的回掉函数里面执行

ref 如果是style-Compoent的形式的时候，使用innerRef 就可以拿到真实的dom结果了

Redux 工作流

不使用 react-redux 的情况下，组件链接 store 在 constructor 里面让 this.state = store.getState() 就可以链接成功了 ,只要可以放在redux的数据，尽可能的放在redux中

1: 使用redux-thunk

2: 使用redux-sagos

react-loadable

react-loadable 底层比较复杂，但是使用第三方的模块还是很简单的

详情页面的代码只有在详情野打开的时候在加载

Immutable

Immutable 是不可改变的对象

其他细节注意事项

1： 暴露完配置添加 less等的方法

scss 的安装：yarn add sass-loader node-sass

less的安装yarn add less less-loader 配置less-loader

记得在本地文件配置完的时候，要同事修改线上配置文件，是相同的配置

2: Ant 使用的一些注意事项

2.1 ant 深度配置: 使用官网的插件，按需加载 less 版本要控制3.0以下, yarn add less@^2.x --save,就不需要每次写某个组件的时候，还需要单独的引入css样式

安装 babel-plugin-import 进行配置bable-loader命令，就不要单独的引入ant.css在页面中了，在less里面也可以配置全局变量了,具体可以查看该插件的官网是怎么配置。

2.2 栅格系统的使用 row col 的使用， 可以很快速的进行布局