react核心api

一粒小麦

发布于 2019-07-18 17:12:28

6490

发布于 2019-07-18 17:12:28

文章被收录于专栏：一Li小麦一Li小麦

React核心api

react从16年12月开始，已经学了有2年多了。react引导了作者找到了第一份比较专职的前端工作。react 2014年横空出世，以其革命性的写法，带动了前端行业的产业升级，尽管比较“重”，却也是笔者至今最喜欢的前端框架，没有之一。

react独创了许多概念，比如diff算法，jsx等。启发了许多著名的框架。

在react的哲学中，单向数据流是最好的数据模型。正是因为它处处设限，所以更好控制，更好维护。（write more，do more.）

简介

官方脚手架:

sudo npm i create-react-app -g

没有任何可配置选项。和vue提示一大堆配置相比，react干净简洁得令人窒息。

实际上创建

create-react-app 你的项目名

cd进去，npm start即可。

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

<App/>，返回的是一个虚拟dom。(createElement函数的返回对象)

jsx插值表达式

通过 {xxx}你可以随意传值

也可以传方法。或是计算结果.

属性（props）

你可以通过属性来给子组件传递你允许任何允许的表达式。

src={aaa}

className:因为class是关键字。所以 labelfor应该写作 htmlFor

对于css，可以直接 {}，里面再放对象。

父子组件传参：一般只能用props来做。

只读的

引入静态资源（css和图片）

import logo from './logo.svg';
import './App.css';

组件（component）

组件形式有两种

标准组件：

import React, { Component } from 'react'

export default class Test extends Component {
    render() {
        return (
            <div>
                123
            </div>
        )
    }
}

函数型组件:

原本是无状态组件,但新版本react可以在函数组件来做状态管理。

function Bbb (props){
  // 调用组件属性：props.xxx
  return <div>bbb</div>
}

状态（state）

比如说一个定时器：

import React, { Component } from 'react'

export default class Test extends Component {
    constructor(props){
        super(props);

        this.state={
            date:new Date()
        }
    }
    componentDidMount(){
        this.timer=window.setInterval(()=>{
            this.setState({
                date:new Date()
            })
        },1000)
    }

      // 组件卸载时
    componentWillUnmount(){
        // 防止内存泄漏
        window.clearInterval(this.timer)
    }
    render() {
        return (
            <div>
                {this.state.date.toLocaleTimeString()}
            </div>
        )
    }
}

所有的状态都随着定时器进行。

componentWillunmount:防止内存泄露

声明状态：

constructor(props){
  super(props)
  this.state={
    // ...
  }
}

设置状态

this.setState({
  xxx:yyy
})

// 或
this.setState((preState,props)=>{

  return {
    xxx:yyy
  }
},callback)

官方文档说千万不要尝试直接用之前的state来计算出新的state。可以看以下例子：

假如 count的初始状态是1，以下两处的计算结果是多少？为什么？

componentDidMount(){
                this.setState({count:this.state.count+1})
        this.setState({count:this.state.count+1})
        this.setState({count:this.state.count+1});

        console.log(this.state.count)
  }

    render(){

    return <div>{this.state.count}</div>
  }

答案是1，2

setState关键点：