react教程 — 组件
一、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教程 — 组件的更多相关文章
- React教程-组件
在React中创建一个组件非常简单(React组件有2种,一个非状态组件,一个有状态组件) 首先我们来看看ES6里面如何写构造函数 class App{ constructor(){ } event( ...
- react教程 — 组件的生命周期 和 执行顺序
一.组件执行的生命周期: 参考 https://www.cnblogs.com/soyxiaobi/p/9559117.html 或 https://www.c ...
- React的组件间通信
一.React的单向数据流 React是单向数据流,数据主要从父节点传递到子节点(通过props).如果顶层(父级)的某个props改变了,React会重渲染所有的子节点.这通常被称为“自顶向下”或“ ...
- 学习react教程
网址收藏: React官网,React的Github,React的中文文档 1.react是什么? React起源于Facebook的内部项目,因为该公司对市场上所有的Javascript MVC框架 ...
- 【react表格组件】material-table 基本用法 & 组件override
教程: https://mbrn.github.io/material-table/#/ https://material-ui.com/api/table/ github: https://gith ...
- React入门介绍(2)- React Component-React组件
React Component-React组件 允许用户自由封装组件是React非常突出的特性,用户可将自己创建的组件像普通的HTML标签一样插入页面,React.CreateClass方法就是用来创 ...
- 看完阮一峰的React教程后, 我写了一个TodoList
看完阮一峰的React教程后,就自己做了这个TodoList,自己慢慢琢磨效率差了点但是作为入门小练习还是不错的. 以下是效果图:我的源码:todolistUI:bootstrap 4 一.组件化 我 ...
- react教程 — 性能优化
参考:https://segmentfault.com/a/1190000007811296?utm_medium=referral&utm_source=tuicool 或 https: ...
- (私人收藏)React教程手册
React教程手册 https://pan.baidu.com/s/1ka2PJ54HgqJ8lC6XgbvdLg pedx React 教程 含有3个附件,如下: react.js react-do ...
随机推荐
- pygame应用——生产者消费者模型
因为操作系统的一个生产者-消费者拓展作业,以一个飞机大战的模型修改来的 import pygame import time from pygame.locals import * bulletsNum ...
- CET-6 分频周计划生词筛选(番外篇:百词斩)
点我阅读 番外-百词斩 2016.09.18 12:00pm transverse counterpart accessory cult gorgeous sediment assimilate st ...
- APT攻防整理-攻击方法/工具
攻击步骤 一般步骤 社工 武器制造 武器投递 漏洞利用 安装后门 后渗透 这5个阶段攻击非常隐蔽,可绕过传统安全设备检测 潜伏控制 传统通信方式不会使用,如cc/socket/http(可采用安全隧道 ...
- Web控件LinkButton
<asp:LinkButton ID="" runat="server" ></asp:LinkButton> 编译后就变成了回发事件 ...
- 20190817 On Java8 第七章 封装
第七章 封装 访问控制权限的等级,从"最大权限"到"最小权限"依次是:public,protected,包访问权限(没有关键字)和 private. 包的概念 ...
- Python 学习笔记15 类 - 继承
我们在编程的过程中,并非都是要重头开始.比如其他人已经有现成的类,我们可以使用其他找人编写的类.术语称之为: 继承. 当一个类继承例外一个类时,它可以获得这个类的所有属性和方法:原有的类称之为 父类, ...
- Python之微信消息防撤回
#!/usr/bin/env python3 # -*- coding: utf-8 -*- __author__ = 'jiangwenwen' import itchat from itchat. ...
- Leetcode Lect3 时间复杂度/空间复杂度
时间复杂度 复杂度 可能对应的算法 备注 O(1) 位运算 常数级复杂度,一般面试中不会有 O(logn) 二分法,倍增法,快速幂算法,辗转相除法 O(n) 枚举法,双指针算法,单调栈算法,KMP ...
- Spring-DI控制反转和IOC依赖注入
Spring-DI控制反转和IOC依赖注入 DI控制反转实例 IDEAJ自动导入Spring框架 创建UserDao.java接口 public interface UserDao { public ...
- 六 BASH 高级变量
高级变量分为三类 变量扩展 ${变量名} 例 ${filename} 大括号 命令替换 $(命令) $(ls /) 小括号 算术扩展 $((算数式)) $(( ...