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
借鉴文章：http://www.52php.cn/article/p-qetrndam-d.html

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!