React专题：不可变属性

biaoxiaoduan 发布于2019-08-26 12:18 / 705人阅读

摘要：没有团伙，多带带作案，干净利落，便于封口。它最大的特点就是不可变。兄弟组件之间传值原理和回调函数一样，只不过这里父组件只是一个桥梁。父组件接收到回调函数的值以后，通过保存该值，并触发另一个子组件重新渲染，重新渲染后另一个子组件便可以获得该值。

本文是『horseshoe·React专题』系列文章之一，后续会有更多专题推出
来我的 GitHub repo 阅读完整的专题文章
来我的 个人博客 获得无与伦比的阅读体验

React是用来解决状态同步的，但它却有一个与this.state并驾齐驱的概念。

这就是this.props。

this.props是组件之间沟通的一个接口。

原则上来讲，它只能从父组件流向子组件，但是开发者有各种hack技巧，基本上近亲之间沟通是不成问题的。

this.props this.props是一个极其简单的接口。世界需要更多这样的傻瓜接口

你只需要像写HTML标签的属性一样，把它写上去，它就传到了子组件的this.props里面。

不过有几个地方需要注意：

有两个特殊的属性ref和key，它们各有用途，并不会传给子组件的this.props。

如果只给属性不给值，React会默认解析成布尔值true。

除了字符串，其他值都要用花括号包裹。

如果你把属性给了标签而不是子组件，React并不会解析。

import React, { Component, createRef } from "react";
import Child from "./Child";

class App extends Component {
    isPopular = false;
    refNode = createRef();
    
    render() {
        return [
            ,
            ,
            ,
        ];
    }
}

export default App;

this.props是一个不可变对象

React具有浓重的函数式编程的思想。

提到函数式编程就要提一个概念：纯函数。

纯函数有几个特点：

给定相同的输入，总是返回相同的输出。

过程没有副作用。

不依赖外部状态。

function doSomething(a, b) {
    return a + b;
}

这是一种编程思想。如果你对这个概念有点模糊，我可以举个例子：

你的杀父仇人十年后突然现身，于是你决定雇佣一个冷面杀手去解决他。

你会找一个什么样的杀手呢？

给多少钱办多少事，效果可预期，从不失手。

不误伤百姓，不引起动静。

没有团伙，多带带作案，干净利落，便于封口。

如果你面对杀父仇人有这样的觉悟，那么纯函数便是你的囊中之物了。

为什么要提纯函数？因为this.props就是汲取了纯函数的思想。

它最大的特点就是不可变。

跟this.state不一样的是，this.props来真的。虽然this.state也反对开发者直接改变它的属性，但毕竟只是嘴上说说，还是要靠开发者自己的约束。然而this.props会直接让你的程序崩溃。

加上React也没有this.setProps方法，所以不需要开发者自我约束，this.props就是不可变的。

沟通基本靠吼 父组件给子组件传值

这个无需赘言，最直观的传值方式。

import React from "react";
import Child from "./Child";

const App = () => {
    return (
        
    );
}

export default App;

子组件给父组件传值

其实就是利用回调函数的参数传递值。

父组件定义一个方法，将该方法通过props传给子组件，子组件需要给父组件传值时，便传参执行该方法。由于方法定义在父组件里，父组件可以接收到该值。

import React, { Component } from "react";
import Child from "./Child";

class App extends Component {
    state = { value: "" };
    
    render() {
        return (
            
        );
    }
    
    handleSomething = (e) => {
        this.setState({ value: e.target.value });
    }
}

export default App;

import React from "react";

const Child = (props) => {
    return (
        
    );
}

export default Child;

兄弟组件之间传值

原理和回调函数一样，只不过这里父组件只是一个桥梁。

父组件接收到回调函数的值以后，通过this.setState保存该值，并触发另一个子组件重新渲染，重新渲染后另一个子组件便可以获得该值。

import React, { Component, Fragment } from "react";
import ChildA from "./ChildA";
import ChildB from "./ChildB";

class App extends Component {
    state = { value: "" };
    
    render() {
        return (
            
                
                
            
        );
    }
    
    handleSomething = (e) => {
        this.setState({ value: e.target.value });
    }
}

export default App;

import React from "react";

const ChildA = (props) => {
    return (
        
    );
}

export default ChildA;

import React from "react";

const ChildB = (props) => {
    return (
        {props.value}
    );
}

export default ChildB;

createContext

GPU云服务器云服务器大小不可变 python 不可变 react编译后webrtc不支持对象不支持属性或方法

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

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

React专题：可变状态

摘要：的参数既可以是一个对象，也可以是一个回调函数。回调函数提供了两个参数，第一个参数就是计算过的对象，即便这时还没有渲染，得到的依然是符合直觉的计算过的值。专题一览什么是可变状态不可变属性生命周期组件事件操作抽象本文是『horseshoe·React专题』系列文章之一，后续会有更多专题推出来我的 GitHub repo 阅读完整的专题文章来我的个人博客获得无与伦比的阅读体验 Reac...

hosition 2019-08-26 12:17 评论0 收藏0
React专题：什么是UI

摘要：现代前端框架的使命就是开发者管理状态，框架根据状态自动生成。专题一览什么是可变状态不可变属性生命周期组件事件操作抽象本文是『horseshoe·React专题』系列文章之一，后续会有更多专题推出来我的 GitHub repo 阅读完整的专题文章来我的个人博客获得无与伦比的阅读体验什么是UI？如果你指的是布局和色彩，那更偏向于设计师的工作。在现代web领域，大家已经有一个共识...

silvertheo 2019-08-26 12:14 评论0 收藏0
React专题：生命周期

摘要：而生命周期钩子，就是从生到死过程中的关键节点。异步渲染下的生命周期花了两年时间祭出渲染机制。目前为这几个生命周期钩子提供了别名，分别是将只提供别名，彻底废弃这三个大活宝。生命周期钩子的最佳实践是在这里初始化。本文是『horseshoe·React专题』系列文章之一，后续会有更多专题推出来我的 GitHub repo 阅读完整的专题文章来我的个人博客获得无与伦比的阅读体验生命周期...

Hanks10100 2019-08-23 11:25 评论0 收藏0
React专题：react，redux以及react-redux常见一些面试题

摘要：我们可以为元素添加属性然后在回调函数中接受该元素在树中的句柄，该值会作为回调函数的第一个参数返回。使用最常见的用法就是传入一个对象。单向数据流，比较有序，有便于管理，它随着视图库的开发而被概念化。面试中问框架，经常会问到一些原理性的东西，明明一直在用，也知道怎么用，但面试时却答不上来，也是挺尴尬的，就干脆把react相关的问题查了下资料，再按自己的理解整理了下这些答案。 reac...

darcrand 2019-08-23 13:41 评论0 收藏0
react进阶漫谈

摘要：父组件向子组件之间非常常见，通过机制传递即可。我们应该听说过高阶函数，这种函数接受函数作为输入，或者是输出一个函数，比如以及等函数。在传递数据的时候，我们可以用进一步提高性能。本文主要谈自己在react学习的过程中总结出来的一些经验和资源，内容逻辑参考了深入react技术栈一书以及网上的诸多资源，但也并非完全照抄，代码基本都是自己实践，主要为平时个人学习做一个总结和参考。本文的关键...

neuSnail 2019-08-20 14:16 评论0 收藏0