react核心api

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关键点:

  • 状态只有组件内部能够访问
  • 同一个key多次操作setState,只执行最后一次。
  • 状态修改可能是异步的(注意可能)

处理方式:

  • 传参数(pre)+回调函数
  • 给setState设置setTimout设置0s后执行
  • 原生事件得到值,可以立刻拿到同步的值。

方法的指向:除了bind,还可以用尖头函数

关于更数据流模型的写法可参照同系列下一篇:《用react的方式来思考》

本文分享自微信公众号 - 一Li小麦(gh_c88159ec1309),作者:一li小麦

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-05-23

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 基于react的H5音频播放器

    项目是基于React,镶嵌在页面。为此开发了组件audio.js。不过不管什么框架。逻辑都是一样的。

    一粒小麦
  • 手撸vuex和vue-router

    把这个store返回出去,那就写完了,核心原理可以说是异常简单。 就用官方文档的案例验证下这个duex有多靠谱:

    一粒小麦
  • 组件设计基础(1)

    单一职责原则在react组件设计中依然管用,尤其是维护一个大型的页面时。但也不是事无巨细都需要拆分。根据所谓"高内聚低耦合"的思想,逻辑紧密的组件是不适合拆分的...

    一粒小麦
  • React 基础实例教程

    首先,需要核心库react.js与React的DOM操作组件react-dom.js

    书童小二
  • 【被玩坏的博客园】之canvas装饰博客园侧边栏

    用户1749219
  • React源码分析与实现(一):组件的初始化与渲染

    阅读源码的方式有很多种,广度优先法、调用栈调试法等等,此系列文章,采用基线法,顾名思义,就是以低版本为基线,逐渐了解源码的演进过程和思路。

    Nealyang
  • 【被玩坏的博客园】之canvas装饰博客园侧边栏

    用户1749219
  • react-组件学习笔记

    本文重点学习理解react组件部分,文档内容来源于react官网以及《react全栈》。本文内容仅针对react初学者,请大神略过,仅限于读书笔记与摘录。

    RobinsonZhang
  • 使用组件的state机制实现屏幕取词

    望月从良
  • 用 React 分页显示数据用react分页显示数据

    展示一下主要三个组件:父组件listBox、列表组件List、按钮组件PageButton

    一个会写诗的程序员

扫码关注云+社区

领取腾讯云代金券