react记录部署

导语

React中的核心概念
1 虚拟DOM（Virtual DOM）
2 Diff算法（虚拟DOM的加速器，提升React性能的法宝）

React主要的原理
Virtual DOM 虚拟DOM;

提供了一种不同的而又强大的方式来更新DOM，
代替直接的DOM操作。
就是Virtual DOM,
一个轻量级的虚拟的DOM;
通过这个Virtual DOM去更新真实的DOM，
由这个Virtual DOM管理真实DOM的更新

 
 我想问的是：为什么通过这多一层的Virtual DOM操作就能更快呢？
 diff算法。
 React会等到事件循环结束，然后利用这个diff算法，
 通过当前新的dom表述与之前的作比较，
 计算出最小的步骤更新真实的DOM
 
 virtual dom----diff----real dom
 
 
 之前我的想法是：dom树是元素组成的;但是在react里面就是
 Components 组件
在DOM树上的节点被称为元素，在这里则不同，Virtual DOM上称为commponent。
Virtual DOM的节点就是一个完整抽象的组件，它是由commponents组成。

Components存在让diff算法更加高效

如何呈现真实的DOM：如何渲染组件，什么时候渲染，怎么同步更新的
1，state,render;
当数据发生变化时，将会调用Render重现渲染，这里只能通过提供的setState方法更新数据。
setState({})更新数据;

React不是一个MVC框架，它是构建易于可重复调用的web组件，侧重于UI, 也就是view层
其次React是单向的从数据到视图的渲染，非双向数据绑定（这个是很重点的问题！！）
不直接操作DOM对象，而是通过虚拟DOM通过diff算法以最小的步骤作用到真实的DOM上。
不便于直接操作DOM，大多数时间只是对 virtual DOM 进行编程

https://120.24.108.143/svn/GAMC/DevCode/MD_Dialog_XML/xml

React将DOM抽象为虚拟DOM，
虚拟DOM其实就是用一个对象来描述DOM，
通过对比前后两个对象的差异，
最终只把'变化'的部分重新渲染，提高渲染的效率

为什么用虚拟dom，
当dom发生更改时需要遍历 而原生dom可遍历属性多大231个 
且大部分与渲染无关 更新页面代价太大

https://segmentfault.com/a/1190000012921279
https://zhuanlan.zhihu.com/p/20346379
React 源码剖析系列 － 不可思议的 react diff
知其然更要知其所以然

JSX的注意点
注意 1: 如果在 JSX 中给元素添加类, 需要使用 className 代替 class

类似：label 的 for属性，使用htmlFor代替
注意 2：在 JSX 中可以直接使用 JS代码，直接在 JSX 中通过 {} 中间写 JS代码即可
注意 3：在 JSX 中只能使用表达式，但是不能出现 语句！！！
注意 4：在 JSX 中注释语法：{/* 中间是注释的内容 */}

React创建组件的两种方式
1 通过 JS函数 创建（无状态组件）
2 通过 class 创建（有状态组件）
函数式组件 和 class 组件的使用场景说明：
1 如果一个组件仅仅是为了展示数据，那么此时就可以使用 函数组件
2 如果一个组件中有一定业务逻辑，需要操作数据，那么就需要使用 class 创建组件，因为，此时需要使用 state

JavaScript函数创建
注意：1 函数名称必须为大写字母开头，React通过这个特点来判断是不是一个组件
注意：2 函数必须有返回值，返回值可以是：JSX对象或null
注意：3 返回的JSX，必须有一个根元素
注意：4 组件的返回值使用()包裹，避免换行问题
function Welcome(props) {
  return (
    // 此处注释的写法 
    <div className="shopping-list">
      {/* 此处 注释的写法 必须要{}包裹 */}
      <h1>Shopping List for {props.name}</h1>
      <ul>
        <li>Instagram</li>
        <li>WhatsApp</li>
      </ul>
    </div>
  )
}ReactDOM.render(
  <Welcome name="jack" />,
  document.getElementById('app')
)

 // class创建的组件中 必须有rander方法 且显示return一个react对象或者null
 class ShoppingList extends React.Component {
  constructor(props) { 
    super(props)
  }
  // class创建的组件中 必须有rander方法 且显示return一个react对象或者null
  render() {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
        </ul>
      </div>
    )
  }
}

props是只读的，无法给props添加或修改属性
class Welcome extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    return <h1>Hello, {this.props.name}</h1>
  }
}