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 ...
随机推荐
- Unity3D架构之PureMVC
之前了解过UI实现框架大多是用MVC架构的,才听说有这么一个基于MVC的跨平台开源框架叫PureMVC,前几天用到了做了一下,写一写分析总结官网位置:http://puremvc.org/ PureM ...
- Scratch可视化的编程工具
1.是什么? 在线编程网址 是一个编程软件,但是不涉及编程语言,是针对青少年开发的编程积木模块. 2.软件的目的是什么? 激发青少年对编程的兴趣 3.怎么用呢? 软件内部是很多积木模块,需要明白每块是 ...
- Decision Tree Algorithm
Decision Tree算法的思路是,将原始问题不断递归地细分为子问题,直到子问题直接可获得答案为止.在模型训练的过程中,根据训练集去做树的生长(Grow the tree),生长所有可能的Bran ...
- NYOJ 654喜欢玩warcraft的ltl(01背包/常数级优化)
传送门 Description ltl 非常喜欢玩warcraft,因为warcraft十分讲究团队整体实力,而他自己现在也为升级而不拖累团队而努力. 他现在有很多个地点来选择去刷怪升级,但是在每一个 ...
- python math 模块
数学模块 引入模块:import math 注意: 使用某个模块下的函数,必须先引入这个模块,否则无法正常使用. ceil() 向上取整操作 格式:math.ceil(数值) 返回值:整型 floor ...
- Spring Security 03
认证和鉴权 配置文件方式 <authentication-manager> <authentication-provider> <!-- 用户的权限控制 --> & ...
- [Linux] 006 命令格式与目录处理命令
1. 命令格式 命令 [-选项] [参数] 如,ls -la /etc 说明 个别命令使用不遵循此格式 当有多个选项时,可以写在一起 简化选项与完整选项 如,-a 为简化选项,--all 为完整选项 ...
- Java中的I/O
1.Java中的I/O分类 I/O分类: 输入流,输出流,或者字节流,字符流 I/O中的四个抽象基类: InputStream,OutputStream:两者属于字节流,前者输入,后者输出.一般后缀名 ...
- 【洛谷新手村】简单字符串 p1055 ISBN号码
p1055 ISBN号码[传送门] 算法标签什么的: 思路:直接以字符串的形式读入这一串数字,然后for循环对字符串进行处理,字符串中的数字存进数组中(如果是X,存为10):然后再根据要求判断是否是正 ...
- java实现mysql数据库从一张表插入数据到另一张表
创建两张表: create table employee( id ), name ), email ), gender ) ); create table copyEmployee( id ), na ...