一、state使用:

  1、什么时候不能 设置state(或没有必要设置):

    a、constructor、

  2、默认的 state 值,一定要在初始化设置。因为,render 比 setState 早。

  3、所有的组件中都加上 shouldComponentUpdate 生命周期,只对组件自己的props改变,才更新组件。屏蔽调 意外 的代码执行。

二、props 的使用:

  1、上面地方可以正常获取 props的值

三、回调渲染模式:https://blog.csdn.net/weixin_30732487/article/details/99894871 或 https://segmentfault.com/a/1190000016885832?utm_source=tag-newest

  1、这种模式中,组件会接收某个函数作为其子组件,然后在渲染函数中以 props.children 进行调用:

<Twitter username='tylermcginnis33'>
{(user) => user === null
? <Loading />
: <Badge info={user} />}
</Twitter>
import React, { Component, PropTypes } from 'react'
import fetchUser from 'twitter'
class Twitter extends Component {
state = {
user: null,
}
static propTypes = {
username: PropTypes.string.isRequired,
}
componentDidMount () {
fetchUser(this.props.username)
.then((user) => this.setState({user}))
}
render () {
return this.props.children(this.state.user)
}
}

四、组件传值:

  1、

  2、Context:    https://www.cnblogs.com/littleSpill/p/11221538.html

  概念:Context提供了一种方式,能够让数据在组件树中传递,而不必一级一级手动传递。

  个人理解: 感觉有点想,父组件 把值给第三方保管(Context对象),孙组件,从第三方那拿值。但是这种处理,感觉不好。

       一般组件,都是分不同的组件的文件的。父组件 和 孙组件要使用同一个context对象,所以,这个context 要单独放在一个文件中,供这个两个组件使用。

import React, { Component, createContext } from 'react';

const BatteryContext = createContext(); 

class Leaf extends Component {  // 声明一个孙组件
render() {
return (
<BatteryContext.Consumer> // Consumer内 回调函数,值作为参数传递进来
{
battery => <h1>Battery : {battery}</h1>
}
</BatteryContext.Consumer>
)
}
} class Middle extends Component { // 声明一个子组件
render() {
return <Leaf />
}
} class App extends Component { // 声明一个父组件
render(){
return (
<BatteryContext.Provider value={690}>
<Middle />
</BatteryContext.Provider>
);
}
} export default App;

最后再提示一下大家,不要滥用context,不然会影响组件的独立性。 如果一个组件中只使用一个Context的话,就可以使用contextType代替Consumer。详见 https://www.cnblogs.com/littleSpill/p/11221817.html

五、 注意事项(也可以说是避免问题):react 中 生命周期 设计的 机制,很容易引起一些问题。            组件生命周期 参考:https://www.cnblogs.com/wfblog/p/11842622.html

  1、有的生命周期中不能 设置 state(或有条件的设置) 不然会 陷入死循环。比如 render,componentWillUpdate、componentDidUpdate(设置好条件才可以更新) 等。    后续在补充。。。

  2、父组件一旦 设置 state ,就会递归 执行 所有 子组件的 render,有的子组件是不需要更新的          后续在补充。。。

    3、ajax请求,最好还是放在使用的组件内进行请求。如果在父组件中请求,因为请求是异步,所以挂载阶段,父组件传递给子组件的props 是undefined。子组件使用 undefined 的属性,是会报错的。

    如果要在父组件上 请求,需要给 props 的值,设置值。初始值可以是空对象,主要子组件使用时,不出现使用  undefined的属性,就可以。  如   undefined.name,就会报错的。

 

六、

 

react教程 — 组件的更多相关文章

  1. React教程-组件

    在React中创建一个组件非常简单(React组件有2种,一个非状态组件,一个有状态组件) 首先我们来看看ES6里面如何写构造函数 class App{ constructor(){ } event( ...

  2. react教程 — 组件的生命周期 和 执行顺序

    一.组件执行的生命周期:                  参考  https://www.cnblogs.com/soyxiaobi/p/9559117.html  或  https://www.c ...

  3. React的组件间通信

    一.React的单向数据流 React是单向数据流,数据主要从父节点传递到子节点(通过props).如果顶层(父级)的某个props改变了,React会重渲染所有的子节点.这通常被称为“自顶向下”或“ ...

  4. 学习react教程

    网址收藏: React官网,React的Github,React的中文文档 1.react是什么? React起源于Facebook的内部项目,因为该公司对市场上所有的Javascript MVC框架 ...

  5. 【react表格组件】material-table 基本用法 & 组件override

    教程: https://mbrn.github.io/material-table/#/ https://material-ui.com/api/table/ github: https://gith ...

  6. React入门介绍(2)- React Component-React组件

    React Component-React组件 允许用户自由封装组件是React非常突出的特性,用户可将自己创建的组件像普通的HTML标签一样插入页面,React.CreateClass方法就是用来创 ...

  7. 看完阮一峰的React教程后, 我写了一个TodoList

    看完阮一峰的React教程后,就自己做了这个TodoList,自己慢慢琢磨效率差了点但是作为入门小练习还是不错的. 以下是效果图:我的源码:todolistUI:bootstrap 4 一.组件化 我 ...

  8. react教程 — 性能优化

    参考:https://segmentfault.com/a/1190000007811296?utm_medium=referral&utm_source=tuicool  或  https: ...

  9. (私人收藏)React教程手册

    React教程手册 https://pan.baidu.com/s/1ka2PJ54HgqJ8lC6XgbvdLg pedx React 教程 含有3个附件,如下: react.js react-do ...

随机推荐

  1. pygame应用——生产者消费者模型

    因为操作系统的一个生产者-消费者拓展作业,以一个飞机大战的模型修改来的 import pygame import time from pygame.locals import * bulletsNum ...

  2. CET-6 分频周计划生词筛选(番外篇:百词斩)

    点我阅读 番外-百词斩 2016.09.18 12:00pm transverse counterpart accessory cult gorgeous sediment assimilate st ...

  3. APT攻防整理-攻击方法/工具

    攻击步骤 一般步骤 社工 武器制造 武器投递 漏洞利用 安装后门 后渗透 这5个阶段攻击非常隐蔽,可绕过传统安全设备检测 潜伏控制 传统通信方式不会使用,如cc/socket/http(可采用安全隧道 ...

  4. Web控件LinkButton

    <asp:LinkButton ID="" runat="server" ></asp:LinkButton> 编译后就变成了回发事件 ...

  5. 20190817 On Java8 第七章 封装

    第七章 封装 访问控制权限的等级,从"最大权限"到"最小权限"依次是:public,protected,包访问权限(没有关键字)和 private. 包的概念 ...

  6. Python 学习笔记15 类 - 继承

    我们在编程的过程中,并非都是要重头开始.比如其他人已经有现成的类,我们可以使用其他找人编写的类.术语称之为: 继承. 当一个类继承例外一个类时,它可以获得这个类的所有属性和方法:原有的类称之为 父类, ...

  7. Python之微信消息防撤回

    #!/usr/bin/env python3 # -*- coding: utf-8 -*- __author__ = 'jiangwenwen' import itchat from itchat. ...

  8. Leetcode Lect3 时间复杂度/空间复杂度

    时间复杂度 复杂度 可能对应的算法 备注 O(1) 位运算 常数级复杂度,一般面试中不会有 O(logn) 二分法,倍增法,快速幂算法,辗转相除法   O(n) 枚举法,双指针算法,单调栈算法,KMP ...

  9. Spring-DI控制反转和IOC依赖注入

    Spring-DI控制反转和IOC依赖注入 DI控制反转实例 IDEAJ自动导入Spring框架 创建UserDao.java接口 public interface UserDao { public ...

  10. 六 BASH 高级变量

    高级变量分为三类 变量扩展 ${变量名}                  例   ${filename}   大括号 命令替换 $(命令) $(ls /) 小括号 算术扩展 $((算数式)) $(( ...