React核心知识

该文章以收录 《React核心知识》

---

前言

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

核心思想

react的核心思想有两点：

• 声明式渲染 (Declarative)

• 基于组件 (Component-Based)）

react渲染流程大体如下：

• 初始化的渲染流程分为 3 步。

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

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

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

• 页面更新的流程同样也是 3 步。

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

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

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

JSX

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 与 state

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

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

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

组件API

• 设置状态：setState(object nextState[, function callback])

• 替换状态：replaceState(object nextState[, function callback])

• 设置属性：setProps(object nextProps[, function callback])

• 替换属性：setProps(object nextProps[, function callback])

• 强制更新：forceUpdate([function callback])

• 获取DOM节点：findDOMNode()

• 判断组件挂载状态：isMounted()

生命周期

• 生命周期的三个状态

  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 中移除的时候立刻被调用。

结束

借鉴文章：https://reactjs.org/tutorial/tutorial.html
借鉴文章：http://www.runoob.com/react/react-refs.html
借鉴文章：https://segmentfault.com/a/1190000007463108