react

React 是一个用于构建用户界面的 JAVASCRIPT 库。

React主要用于构建UI，很多人认为 React是 MVC 中的 V（视图）。

MVC:model view controller

React的概念：组件 ，JSX ，virtual(虚拟) DOM ，Data Flow

React的使用：

1.直接下载三个库： react.min.js 、react-dom.min.js 和 babel.min.js：

2.通过 npm 使用 React: npm install react...

在文件中导入React：

import React, { Component } from 'react'

import {render} from 'react-dom'

import './index.css' 导入文件样式

3.使用 create-react-app 快速构建 React 开发环境：

$ npm install -g create-react-app

$ create-react-app my-app

$ cd my-app/

$ npm start

用class App extends Component{ } 和function App(){}创建的组件有return返回值,返回一个根元素，render时需要用</>包裹起来

props：只读属性对象，传递参数会作为props对象的属性，用 props.属性名  读取，用 props.children 获取某个组件的内容(子元素)

  state：只有通过class创建组件才有state状态，初始化数据 this.state = {date: new Date()}; 设置新的数据重新渲染页面数据 this.setState({ date: new Date() });

组件绑定事件：onClick 用来绑定单击事件

 this.state={ name:'wdl' }
<div onClick ={this.handleCountAdd.bind(this)}>事件 {this.state.name}</div>
 handleCountAdd(){
       this.setState({
           name:'love'
       })
    }

组件生命周期函数：

组件的生命周期包含三个阶段：创建阶段（Mounting）、运行和交互阶段（Updating）、卸载阶段（Unmounting）

• Mounting：
• 特点：该阶段的函数只执行一次

constructor(  props )  作用：1 获取props 2 初始化state
componentWillMount()  用途：发送ajax请求获取数据
render()  作用：渲染组件到页面中，无法获取页面中的DOM对象
componentDidMount()

• 1 组件已经挂载到页面中
• 2 可以进行DOM操作，比如：获取到组件内部的DOM对象
• 3 可以发送请求获取数据
• 4 可以通过 setState() 修改状态的值
• 注意：在这里修改状态会重新渲染

• Updating

componentWillReceiveProps() 

• 说明：组件接受到新的props前触发这个方法
• 参数：当前组件props值
• 可以通过 this.props 获取到上一次的值
• 使用：若你需要响应属性的改变，可以通过对比this.props和nextProps并在该方法中使用this.setState()处理状态改变
• 注意：修改state不会触发该方法

shouldComponentUpdate() 

• 作用：根据这个方法的返回值决定是否重新渲染组件，返回true重新渲染，否则不渲染
• 优势：通过某个条件渲染组件，降低组件渲染频率，提升组件性能
• 说明：如果返回值为false，那么，后续render()方法不会被调用
• 注意：这个方法必须返回布尔值！！！
• 场景：根据随机数决定是否渲染组件

componentWillUpdate() 

• 作用：组件将要更新
• 参数：最新的属性和状态对象
• 注意：不能修改状态 否则会循环渲染

render() 同上
componentDidUpdate()

• 作用：组件已经被更新
• 参数：旧的属性和状态对象

• Unmounting

componentWillUnmount()

作用：在卸载组件的时候，执行清理工作，比如

• 1 清除定时器
• 2 清除componentDidMount创建的DOM对象

创建React实例：

1，

const App=(<div className='app'> 致橡树 </div>)
render(App,document.getElementById('root'))

2.

function Welcome(props) {
    return <h1>现在时间：{props.date.toLocaleTimeString()}</h1>;
  }
  function tick(){
    render(
        <Welcome date={new Date()} />,
        document.getElementById('root')
      );
  }
  setInterval(tick,1000)

3.

class Clock extends Component{
    constructor(props){
        super(props)
        this.state={ date:new Date()}
    }
    //创建阶段 生命周期函数
    componentDidMount(){
     this.timeId= setInterval(()=>this.app(),1000)
    }
    //卸载阶段 生命周期函数
    componentWillUnmount(){
     clearInterval(this.timeId)
    }
    render(){
        return(
            <div>
                <h1>hello world!</h1>
                <h2>it is {this.state.date.toLocaleTimeString()}</h2>
            </div>
        )
    }
    app(){
        this.setState({
             date: new Date()
        })
    }
}
render(<Clock/>,document.getElementById('root'))