react学习总结1--基础（一）

react 学习总结–基础（一）

说明

React 版本 ：”15.4.1”

react-tap-event-plugin 版本： “^2.0.1”

1.react 是什么

React 是 Facebook 内部的一个JavaScript类库，可用于创建Web用户交互界面。他引入了一种新的方式来处理浏览器DOM，只需要声明式的定义各个时间点的用户界面，无需关心数据变化时需要更新那一部分DOM。在任何时间点，React都能以最小的DOM修改来更新整个应用程序。

react 的特点

react 将原本的DOM操作接管，提出了 Virtual DOM(虚拟DOM)、单项数据流、用很少的接口覆盖在组件开发的生命周期上，采取声明式的语法等，实现了一个纯粹的组件“引擎”。

react 鼓励你为每一个关注点创造一个独立的组件，并把所有的逻辑和标签封装在其中

一个完整的例子

import React,{Component} from 'react';
import ReactDOM from 'react-dom';

export default class Child extends Component{
constructor(props){
super(props);
}
render(){
return (
<div>this is component</div>
)
}
}

ReactDOM.render((
<Child />
),document.getElementById('app'));

2.JSX

JSX 即 JavaScript XML 一种在React组件内部构建标签的类XML语法。React在不使用JSX的情况下一样可以工作，然而使用JSX可以提高组件的可读性

JSX 以干净整洁的方式保证了组件中的标签与所有业务逻辑的相互分离，他不仅提供了一个清晰、直观的方式来描述组件树，同时还让你的应用程序更加符合逻辑

JSX 与 HTML 有何不同

JSX 以与 HTML 同样的方式给每个节点设置属性，同时还提供了将属性设置为动态的JavaScript变量的便利

HTML：

<div id="div-id" class="div-class"></div>

JSX：

<div id={divId} className={divClass}></div>

属性值{}可以设置为一个函数调用的返回结果，但是不能直接加入if/else逻辑，解决的办法就是使用以下运算符

使用三目运算符

flag ? true : false;

设置一个变量并在属性中引用他

讲逻辑转化到函数中

使用 && 运算符

非DOM属性 key（键） / ref（引用）

事件，react的事件名已经被规范化并统一用驼峰形式表示，例如click变为onClick

注释，jsx本质就是JavaScript，注释有两种形式

当做一个元素的子节点

<div> {/* 子节点 */} <p>内容</p></div>

内联在元素的属性中

<div /* 属性中 */ class="div-class">内容</div>

特殊属性 for => htmlFor , class => className

样式，内联样式，只需要把驼峰形式的命名和期望的css值拼接成对象即可

3.组件的生命周期

实例化阶段

一个实例初次被调用时的生命周期方法，首次使用一个组件类时，下面这些方法依次被调用：

getDefaultProps

getInitialState

componentWillMount

render

componentDidMount

再次调用组件类创建新的实例时，除 getDefaultProps 外都会被重新调用

getDefaultProps

在组件类创建的时候调用一次，这个方法返回的对象用于为实例设置默认的props值，会合并到 this.props

该方法返回的任何复杂的值，例如对象和数组，都会在所有实例中共享，而不是拷贝或者克隆

getDefaultProps(){
return {
title : ''
};
}

getInitialState

对组件的类的每个实例来说，只调用一次，返回值作为this.state的初始值，在这个方法里，已经可以访问到 this.props

getInitialState(){
return {
list : []
}
}

componentWillMount

该方法会在完成首次渲染之前被调用，且只调用一次，此方法中可以感知到state，是render之前修改 state的最后一次机会，修改state之后不会再次调用

constructor(props) {
super(props);
this.state = {
num : 0
};
}
componentWillMount() {
console.log(this.state.num); //0，只会打印一次
this.setState({num:2});
}

render

render 是组建唯一一个必须的方法，在这里会创建一个虚拟的DOM，来表示组件的输出

render 中需要遵守特定的规则

只能通过 this.props 和 this.state 访问数据

可以返回任何 React 组件 或者 null，false 来表明不需要渲染任何东西，React 渲染一个

<noscript></noscript>

标签来处理当前的差异检查逻辑

只能出现一个顶级组件（不能返回一组元素）

必须纯净，此方法内不要修改组件的 state ，不读写DOM信息，也不要和浏览器交互

render 方法返回的结果不是真正的DOM，而是一个虚拟的表现，React随后会把它和真实的DOM做对比，来判断是都有必要做修改

render
c663
() {
return (
<div className="container">
<div style={{display : this.state.close ? 'none' : 'block'}} className="header">
{this.props.headerText}
</div>
<div className="content">
{this.props.content}
</div>
</div>
}

componentDidMount

render 方法成功调用 初始化渲染执行之后立刻调用一次，仅客户端有效（服务器端不会调用），在此阶段中，可以访问真实的DOM元素，如果想与其他框架集成，可以在此方法中进行

componentDidMount(){
console.log(ReactDOM.findDOMNode(this.refs.a)); //输出真实的DOM节点
}

存在期

此时组件已经渲染好，并且用户可以与它进行交互，

随着应用状态的改变，下列方法依次被调用

componentWillReceiveProps

shouldComponentUpdate

componentWillUpdate

render

componentDidUpdate

componentWillReceiveProps

在任意时刻，组件的props都可以通过父辈组件来更改，在组建接收到新的props的时候就会调用此方法，在初始化渲染的时候此方法不会被调用，在函数中调用this.setState()将不会引起第二次渲染

componentWillReceiveProps(nextProps) {
if (nextProps.checked !== undefined) {
this.setState({
checked : nextProps.checked
})
}
}

shouldComponentUpdate

在接收到新的props或者state，将要渲染之前调用，通过返回的true/false决定组件是否更新

如果返回 false ，那么render 将不会被执行，componentWillUpdate 和 componentDidUpdate 也不会被执行

shouldComponentUpdate(nextProps, nextState) {
if (nextProps.num === this.props.num && nextState.num === this.state.num) {
return false;
}
}

componentWillUpdate

组件在接收到新的props或者state之前立刻调用，做一些更新前的准备，不能在此方法中调用this.setState()，需要更新state或者props可以再 componentWillReceiveProps中更新

componentWillUpdate(nextProps, nextState) {
console.log(nextProps);
console.log(nextState);
}

componentDidUpdate

与 componentDidMount 类似的方法，给了我们更新已经渲染好的DOM的机会，可以操作真实DOM

componentDidUpdate(prevProps, prevState) {
console.log(prevProps);
console.log(prevState);
}

销毁期

组件被使用完成后

componentWillUnmount

componentWillUnmount

组件被移除前调用，执行必要的清理任务，例如无效的定时器，在componentDidMount中创建的DOM元素等

componentWillUnmount() {
clearInterval(this.timer);
}

4.下一篇内容传送门

react 数据流

事件处理

复合组件

DOM操作

表单