资讯专栏INFORMATION COLUMN

快速入门React

figofuture / 2820人阅读

摘要:考虑到是快速入门,于是乎我们就记住一点,当修改值需要重新渲染的时候,的机制是不会让他全部重新渲染的,它只会把你修改值所在的重新更新。这一生命周期返回的任何值将会作为参数被传递给。

安装react

npm install creat-react-app -g

这里直接安装react的一个脚手架,里面包含了要用到的许多东西,帮助快速入门react

创建新项目

create-react-app my-app

cd my-app

npm start

用脚手架创建一个新的单页应用,进到项目里面后start跑起来

react组件

引入Component组件

JSX语法

渲染虚拟DOM

组件props

组件state

组件嵌套

组件生命周期

组件总览

首先在头部引入Component组件,然后通过class方式继承Component,最后将组件导出,即可成为多带带组件使用。需要注意的地方就是组件的首字母一定要大写

//引入Component
import {Component} from "react";

//首字母大写!
class MyComponent extends Component{
    
    consturtion(props){
        super(props);
        this.state={
            isShow:true
        }
    }
    /*react生命周期函数*/
    componentWillMount() {}

    componentDidMount() {}
    
    componentWillReceiveProps() {}
    
    shouldComponentUpdate() {}
    
    componentWillUpdate() {}
    
    componentDidUpdate() {}
    
    componentWillUnmount() {}
    //通过render函数可以将JSX语法渲染成真实dom
    render() {      
        return (
            

我是组件

{this.props.test}

{this.state.isShow}

) } } //首字母大写! class Parent extends Component{ return } export default Parent;
JSX语法

确实说白了就是html标签写到js中去,然后通过babel转译成react虚拟DOM对象,然后再渲染。
上例中

render() {      
    return (
        
我是组件,{this.props.test}
) }

其实用的就是JSX语法,那么在标签内可以嵌套js语句。想要嵌套js语句的时候需要用{}包起来。

渲染虚拟DOM

关于这一点,要详细说起来还挺长的。考虑到是快速入门,于是乎我们就记住一点,当修改值需要react重新渲染的时候,react的机制是不会让他全部重新渲染的,它只会把你修改值所在的dom重新更新。这也是为什么react性能快的一大原因。这个选择渲染dom的算法叫做diff算法,如果要学习react就不能把这个给忘记。在日后需要好好把这方面的知识补全。这里还要补充的就是,react把JSX语法先转成react对象,然后通过内部创建节点插入到dom当中。还是考虑到快速,所以该节篇幅就不继续展开了,这些知识日后需要好好补全。

组件props

props如果接触过Vue的话,应该会很好理解这个概念。没接触过也不要紧,因为是比较容易接受的。我们这么理解,其实就是父组件传给子组件的一些东西,可以是基本数据类型,也可以是引用数据类型,也就是说啥都可以传。子组件可以通过this.props这个对象来获取父组件传下来的值

还是看回上面的例子

class MyComponent extends Component{
    render() {
        //这里可以拿到
        return (
            

我是组件

{this.props.test}

{this.state.isShow}

) } } class Parent extends Component{ render() { //通过父组件传进去 return } }
组件state

组件state是状态,这里存放的就是该组件的一些会改变的变量,就是状态。比如判断组件属性变化,获取表单值等。修改state会引起react重新渲染,也就是更新状态会引起组件刷新。我们可以通过setState()这个函数来设置state的值。不过要注意的是setState()这个函数是异步函数。下面还是看上面的例子

class MyComponent extends Component{
    consturtion(props){
        super(props);
        this.state={
            isShow:true
        }
    }
    render() {
        return (
            

我是组件

{this.props.test}

{this.state.isShow}

) } }
组件的嵌套

这个意思实际上就是在一个组件里面可以用别的组件的意思。因此你可以把组件划分得比较细致,以便更多的复用。

class Parent extends Component{
    render() {
        //使用了MyComponent组件
        return 
    }
}
组件生命周期

在这里就说一下组件的生命周期函数吧

componentWillMount() {}组件挂载前

componentDidMount() {}组件挂载完执行

componentWillReceiveProps() {}组件更新数据时执行,propsstate

shouldComponentUpdate() {}组件需要更新时执行

componentWillUpdate() {}组件更新前执行

componentDidUpdate() {}组件更新后执行

componentWillUnmount() {}组件销毁前执行

下面一张图解释生命周期

当然想要暂时略过也不是不可,但日后需要了解。

 16.7 生命周期 装载

constructor

static getDerivedStateFromProps()

render()

componentDidMount()

组件更新

static getDerivedStateFromProps()

shouldComponentUpdate()

render()

getSnapshotBeforeUpdate()

componentDidUpdate()

卸载

componentWillUnmount()

错误处理

static getDerivedStateFromError()

componentDidCatch()

constructor

constructor可以初始化state

constructor(props) {
  super(props);
  this.state = { color: "#333" };
}

不要直接把props附给state!此模式仅用于你希望故意忽略属性更新 。

constructor(props) {
  super(props);
  // Don"t do this!
  this.state = { color: props.color };
}
 componentDidUpdate()

可以用作异步发请求,该生命周期在组件更新时候给多了一次机会操作dom

componentDidUpdate(prevProps) {
  // Typical usage (don"t forget to compare props):
  if (this.props.userID !== prevProps.userID) {
    this.fetchData(this.props.userID);
  }
}

为了防止重复渲染,如有setstate必须包括在条件中!

shouldComponentUpdate()

实际上作为性能优化的一种方案,但是不能依赖于它来阻止渲染,因为这样会引起bug

不推荐做深相等检测,或使用JSON.stringify()在shouldComponentUpdate()中。这是非常无效率的会伤害性能。

注意,返回false不能阻止子组件当他们的状态改变时重新渲染。

static getDerivedStateFromProps()

组件实例化后和接受新属性时将会调用getDerivedStateFromProps。它应该返回一个对象来更新状态,或者返回null来表明新属性不需要更新任何状态。

getSnapshotBeforeUpdate()

getSnapshotBeforeUpdate()在最新的渲染输出提交给DOM前将会立即调用。

它让你的组件能在当前的值可能要改变前获得它们。这一生命周期返回的任何值将会 作为参数被传递给componentDidUpdate()。

更深入学习react

学完react,我们还需要知道react-router、redux等react全家桶。还在这推荐一个开源框架DVa.js。当然,这是融合的比较好的,如果学有余力不妨去了解了解

附上一张学习路线图,供大家学习参考

图片来源:https://github.com/adam-golab/react-developer-roadmap

后话

入门react并不难,但是要用得精通却不容易。本文并不指望能让你懂多少react,但是如果能带你入门,那便是他它的成功。希望每个人都能成为自己想要的样子。

最后,成功不在一朝一夕,我们都需要努力

原创文章,转载需联系

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/96130.html

相关文章

  • 2019React开发者必备的技能清单

    摘要:一份开发者必备的技能清单,请查收。入门查漏补缺深入学习查看原图下载源文件使用快速上手,并了解其中的概念。官方教程入门教程小书文章精读,问题解答。 一份react开发者必备的技能清单,请查收。入门、查漏补缺、深入学习... showImg(https://segmentfault.com/img/remote/1460000018000950?w=1965&h=3332); 查看原图 ...

    AlphaWatch 评论0 收藏0
  • React 可视化开发工具 Shadow Widget 非正经入门(之五:指令式界面设计)

    摘要:本篇解释中类的控制指令,与指令式界面设计相关。本专栏历史文章介绍一项让可以与抗衡的技术可视化开发工具非正经入门之一三宗罪可视化开发工具非正经入门之二分离界面设计可视化开发工具非正经入门之三双源属性与数据驱动可视化开发工具非正经入门之四 本系列博文从 Shadow Widget 作者的视角,解释该框架的设计要点。本篇解释 Shadow Widget 中类 Vue 的控制指令,与指令式界面...

    pinecone 评论0 收藏0
  • Vue.js快速入门

    摘要:今年以来,的文档更新很快完善社区也日渐状大,再加上于某厂你懂的大力的推广,的前景十分光明。一般情况下,中小型的系统从迁移到版本大概只需要天的时间。快去动手尝试吧原创新书移动前端高效开发实战已在亚马逊京东当当开售。 作者:晓飞(沪江Web前端开发工程师)本文原创,转载请注明作者及出处 Vue.js框架已经火了好长一段时间了,早在2015年的双11中,淘宝的部分导购业务——如:双十一晚会摇...

    KitorinZero 评论0 收藏0
  • 前端资源分享-只为更好前端

    摘要:一团队组织网站说明腾讯团队腾讯前端团队,代表作品,致力于前端技术的研究腾讯社交用户体验设计,简称,腾讯设计团队网站腾讯用户研究与体验设计部百度前端研发部出品淘宝前端团队用技术为体验提供无限可能凹凸实验室京东用户体验设计部出品奇舞团奇虎旗下前 一、团队组织 网站 说明 腾讯 AlloyTeam 团队 腾讯Web前端团队,代表作品WebQQ,致力于前端技术的研究 ISUX 腾...

    zxhaaa 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<