jsx语法

1.元素的类名用className
2.渲染富文本内容，会默认被转义而把标签展示出来，所以要用另外一种方法，用dangerouslySetInnerHTML={{__html:detail}}来展示。第一个花括号表示里面是一个js表达式，第二个花括号表示这个js表达式就是一个对象。
3.如果需要再元素上用for属性，就不能写for，要写htmlFor，比如<label htmlFor=""></label>
4.注释 多行注释 {/注释内容/} 单行注释 //注释内容

组件间的传值

1.父组件是通过属性的形式向子组件传数据的，子组件通过this.props接收数据
2.在子组件中不允许直接修改父组件的内容，要在子组件中调用父组件的方法来修改父组件的内容。父组件通过属性的方式向子组件传递一个方法，子组件通过this.props调用这个方法。

代码优化

1.在constructor里为方法进行函数作用域的绑定，这样可以绑定函数作用域的绑定只会执行一次，节约性能。

constructor(props){
    super(props);
    this.state = {
      inputValue:'',
      listData:[],
    }
    this.handleInputChange = this.handleInputChange.bind(this)
    this.handleBtnClick = this.handleBtnClick.bind(this)
    this.handleDelete = this.handleDelete.bind(this)
  }

2.在使用this.props里的属性的时候，先进行解构赋值获取属性。
3.引入样式的代码，放在最引入组件的最后。
4.render方法里融合的逻辑比如map遍历，会让代码很长，可以通过提炼一个方法来返回这段代码，会让这段代码体积变小，显得比较精简。
5.react新版已经不推荐使用setState传递一个对象来进行数据变更了，而是传递一个函数来变更，这个函数最终返回一个需要更新的数据对象。

this.setState(()=>{
  return {
  }
})
//es6简写
this.setState(()=>({

}))

6.用index做key值，是一种不靠谱不负责任的行为，有可能会造成代码的错误。
7.单向数据流：父组件可以向子组件传值，但是子组件一定不能直接修改这个值，否则会报错。

React思考

1.React是声明式开发，使得我们可以减少大量DOM操作的代码量；
2.可以与其他框架并存；
3.组件化；
4.单向数据流，父组件可以向子组件传递数据，但是子组件绝对不能直接修改这个数据；
5.是视图层框架，react在做大型项目的时候不够用，只能用它搭建视图，只解决数据和页面渲染方面的东西，需要用到flux，redux这样的数据层框架来辅助开发，所以不是大型的完整框架。
6.是函数式编程：constructor(),render()等等，带来的好处是维护起来比较容易，每个函数各司其职；方便自动化测试。

image.png

React开发调试工具 react developer tools

进入chrome浏览器扩展程序，进入app store应用商店，搜索react developer tools进行安装。

propTypes与defaultProps的应用

1.使用PropTypes进行类型检查，propTypes限制传值的类型，string,func,number等等，类型不对，就会报出警告。
出于性能原因，propTypes仅在开发模式下检查
2.使用propTypes要先引入，import PropTypes from 'prop-types'；

import PropTypes from 'prop-types'
TodoItem.propTypes = {
  item: PropTypes.string,
  index: PropTypes.number,
  handleDelete: PropTypes.func
}

3.当给一个值设置了类型，但是父组件没有给子组件传这个值，那么就不会校验，也不会有警告。如果设置为必须，就会校验，PropTypes.string.isRequired
4.propTypes设置为isRequuired的时候，可以通过defaultProps设置一个默认值。

TodoItem.defaultProps = {
  item:'hello react'
}

props,state与render函数之间的关系

1.state数据与render页面联动底层的原理
当组件的state或者props发生改变的时候，这个组件的render函数就会被重新执行。render重新执行，就会拿到最新的数据去渲染页面。
2.当父组件的render函数被运行的时候，它的子组件的render函数都将被重新运行（即使props没有发生改变，也会被运行）。
3.当子组件通过父组件传来的方法更改父组件的state的时候，父组件的render会重新执行，因为父组件的render函数重新执行，子组件的render函数也被重新执行。

React中的虚拟DOM

虚拟DOM是一个js对象，用它来描述真实DOM。
React数据视图更新原理：
1.state数据
2.JSX模板
3.数据 + 模板生成虚拟DOM
['div',{id:'box'},['span',{},'hello world']]
4.用虚拟DOM的结构生成真实DOM来显示
<div id='box'><span>hello world</span></div>
5.state发生变化
6.数据 + 模板生成新的虚拟DOM
['div',{id:'box'},['span',{},'hello react']]
7.比较原始虚拟DOM与新的虚拟DOM的区别，找出区别是什么
['div',{id:'box'},['span',{},'hello world']]
['div',{id:'box'},['span',{},'hello react']]
8.直接操作DOM,修改区别。

深入了解虚拟DOM

JSX代码到真是DOM的原理：
JSX由Reacet.createElement()函数转为虚拟DOM，虚拟DOM再转为真实DOM渲染。
JSX -> createElement -> 虚拟DOM(js对象) ->真实DOM

render(){
    return (
       <div><span>{this.props.content}</span></div>
    )
  }
//如果不用jsx，以下代码同样实现。但还是jsx更清晰简单。
render(){
    return (
       React.createElement('div',{},React.createElement('span',{},this.props.content))
    )
  }

虚拟DOM的优点：

1.性能提升了，因为真实DOM的比对变为了js对象的比对；
2.使得跨端应用得以实现，React Native。虚拟DOM转为原生组件，就可以写原生应用了，一套代码，实现网页和原生应用；

虚拟DOM的diff算法(原始虚拟DOM与新的虚拟DOM如何比对)

1.为什么setState设计成异步的
是为了提升react底层的性能。当state数据发生变化的时候，react会进行虚拟DOM比对。setState是异步的，如果短时间内，发生了多次setState，react可以把多次setState合并成一次setState，只进行一次虚拟DOM比对，然后更新一次DOM，就可以省去多次DOM比对带来的性能上的耗费。所以setState设计成异步函数的初衷本质上是为了react底层的性能。
2.同层比对
在虚拟DOM比对的时候有个同层比对的概念，diff算法比对两个虚拟DOM差异的时候，会逐层的比对，如果这一层虚拟DOM一致，就接着比对下一层，如果这一层虚拟DOM不一致的话，下面的就不会再比对了，重新生成一遍下面的所有DOM，直接用新的替换掉老的，这样提升性能。（这样可能会导致有些没有变化的DOM的渲染的浪费，但是这种比对算法简单，比对速度快，节省了算法上的性能消耗。）

image.png

3.key值比对
react中在做列表循环的时候要引入key值，实际上是为了提高虚拟DOM比对的性能。虚拟DOM的比对，以key值做关联，所以key值要保持稳定。
在项目中尽量不要用index做key值，因为index做key值不稳定，比如删除了列表中的第一项，列表中的后面的其他项的index值跟着发生变化，就导致key值不稳定，原始虚拟DOM上的key值与新的虚拟DOM上的key值不同，影响比对性能。

image.png

同层比对，key值比对，都是diff算法中的一部分。

React中ref的使用

1.ref等于一个箭头函数，函数接收一个参数，这个参数是指向当前元素对应的真实的DOM对象。帮助我们在react里面直接获取一个DOM元素。
一般情况下不建议使用。
用到的时候要注意，如果希望数据更新之后获取DOM，那么在setState的回调函数里去获取。因为setState是一个异步函数，不是立即执行的。

React的声明周期函数

image.png

声明周期函数是指在某一个时刻组件会自动调用执行的函数。

一.Initialization 初始化过程

initialization是初始化过程，组件会初始化自己的数据，props，state。constructor是初始化的位置，接收props，定义state。

二.Mounting 挂载过程

一个组件要被渲染挂载到页面上，mounting就是挂载的意思。初始化之后就去挂载。
1.componentWillMount
在组件即将被挂载到页面的时刻自动执行。
2.render
3.componentDidMount
在组件挂载到页面之后自动被执行。

三.Updating 更新过程

props发生变化，或者state发生变化，总之数据发生变化的时候，就是更新的过程。

image.png

1.componentWillReceiveProps
一个组件要从父组件接收参数，在父组件render执行的时候，如果这个组件是第一次存在于父组件中，componentWillReceiveProps不会执行，如果这个组件已经存在于父组件中，才会执行。
2.shouldComponentUpdate
组件更新之前会被自动执行,返回一个布尔类型的结果。返回true可以更新，返回false不会更新，后面的生命周期都不走了。
3.componentWillUpdate
组件更新之前，在shouldComponentUpdate返回true的时候会自动执行，返回false的时候就不会执行了。
4.render
5.componentDidUpdate
组件更新完成之后，会自动执行

四.Unmounting卸载过程

1.componentWillUnmount
当一个组件即将被从页面中移除的时候，会被执行。

React 声明周期函数的使用场景

为什么唯独render函数删除了之后，程序会报错？因为Component组件里面默认内置了其他的生命周期函数，但是没有内置render函数的默认实现，所以render需要自己定义。
1.应用shouldComponentUpdate来提高组件的性能。

shouldComponentUpdate(nextProps,nextState){
    if(nextProps.content!==this.props.content){
      return true
    }else{
      return false
    }
  }

通过shouldComponentUpdate生命周期函数提升了组件的性能，避免一个组件做无畏的render操作，render函数重新执行，react底层需要生成一份虚拟DOM,与之前的虚拟DOM作比对，这样做可以省略比对。
2.在componentDidMount中发送ajax请求
在componentDidMount里发送ajax请求，只执行一次，不会重复执行。
如果在componentWillMount发送请求，当我们去写reactNative或者用react做服务端的同构，可能会与以后更高端的一些技术产生冲突，为了避免冲突，把ajax请求放在componentDidMount里是最合理的。
3.使用axios扩展工具发送ajax请求
axios是易用简洁高效的http库，它基于promise，符合最新的es规范，提供并发的api，客户端防止csrf(跨站点请求伪造Cross—Site Request Forgery)。体积较小。
axios，ajax与fetch，三选一，axios当之无愧。
查看：axios，ajax与fetch的区别