React核心知识

前言

本文章主要是总结了一些react的基础知识和API,这里借鉴了一些其他文章的内容，旨在大概的了解一下react的基础知识。读这篇文章之前，确定你已经对react有了初步认识。

react的核心思想有两点：

react渲染流程大体如下：

第一步，开发者使用 JSX 语法写 React，babel 会将 JSX 编译为浏览器能识别的 React JS 语法。这一步，一般配合 webpack等工具在本地进行。

第二步，执行 ReactDOM.render 函数，渲染出虚拟DOM树。

第三步，react 将虚拟DOM，渲染成真实的DOM。

第一步，当页面需要更新时，通过声明式的方法，调用 setState 告诉 react。

第二步，react 自动调用组件的 render 方法，渲染出虚拟 DOM。

第三步，react 会通过 diffing 算法，对比当前虚拟 DOM 和需要更新的虚拟 DOM 有什么区别。然后重新渲染区别部分的真实 DOM。

JSX 就是用来声明 React 当中的元素,最终将其渲染成真实的DOM。
JSX 只是为 React.createElement(component,props,...children) 方法提供的语法糖。

例如：

jsx的书写方式：

<MyButton color="blue" shadowSize={2}>
  Click Me
</MyButton>

会先编译为：

React.createElement(
  MyButton,{color: 'blue',shadowSize: 2},'Click Me'
)

在react中定义组件有三种方式：函数定义或者是类定义组件，还可以通过React.createClass() 来定义组件

function Web(props){
  return <h1>hello,{props.name}</h1>
}

类定义组件方法：

clas Web extends React.Component{
    render(){
       return <h1>hello,{props.name}</h1>
    }
}

通过React.createClass() 来定义组件：

var Web = React.createClass({
    render(){
       return <h1>hello,{props.name}</h1>
    }
})

组件定义好后我们就可以直接渲染：

ReactDOM.render(
   Web,document.getElementById('root');
)

props是一种父级向子级传递数据的方式，子组件只能通过 props 来接收上级组件传递过来的数据。并且props是只读的，无论是使用函数或是类来声明一个组件，它决不能修改它自己的props。也就是react组件必须向纯函数那样使用它们的props。

// 像这种没有改变它自己的输入值，当传入的值相同时，
// 总是会返回相同的结果。这样的函数被称为纯函数。
function fun(a,b){
   return a + b;
}

一个组件的显示形态可以由数据状态和外部参数所决定，外部参数也就是props，而数据状态就是State。State可以在不违反props只读情况下，根据用户操作、网络响应、或者其他状态变化，使组件动态的响应并改变组件的输出。

生命周期的三个状态
1. Mounting：已插入真实 DOM
2. Updating：正在被重新渲染
3. Unmounting：已移出真实 DOM
生命周期的方法
1. componentWillMount 在渲染前调用
2. componentDidMount : 在第一次渲染后调用
3. componentWillReceiveProps在组件接收到一个新的prop时被调用。这个方法在初始化render时不会被调用
4. shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。
5. componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
6. componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用
7. componentWillUnmount在组件从 DOM 中移除的时候立刻被调用。