react 介绍

梦里梦外; 2022-04-22 07:14 208阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70][]

兄弟关系传值要用到vuex或者Redux

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 1][]

React基础知识  
React虚拟dom概念， 这是React性能高效的核心算法  
开源算法  
简单示例  
官方解释  
React组件，理解什么叫做组件化  
组件是React的一个主要特性  
组件对于模块化开发的重要性  
组件的return函数返回的HTML结点必须是一个  
可以给外部使用的组件定义：

export default class ComponentHeader extends React.Component\{\}  
入口的定义：

ReactDOM.render(,document.getElementById(‘example’));  
React多组件嵌套  
组件也可以通过参数的形式传递  
组件的return 函数返回的HTML结点必须是一个  
注意项目命名的规范与文件的结构化  
JSX内置表达式  
\{window.username == ” ? ‘默认用户名’ : ‘用户名’ + username\}  
\*  
<input type="button" value=\{username\} disabled=\{boolInput\} />  
1  
\{/\*注释\*/\}  
HTML显示可以进行Unicode转码  
HTML要显示还可以通过  
生命周期，纵观整个React的生命周期

React属性与事件  
State属性，控制着Raect的一切  
state对于模块属于 自身属性  
初始化： this.state = \{username:”Parry”\};  
初始化可以放置在构造函数constructor里  
修改state：this.setState(\{username:”IMOOC”\});  
state的作用域只属于当前的类，不污染其他模块  
Props属性  
props对于模块属于 外来属性  
传递参数  
<IndexBody userid=\{123456\} username='nick' />  
1  
模块中接受参数：  
\{this.props.userid\} \{this.props.username\}  
1  
事件与数据的双向绑定，包含了父子页面之间的参数互传  
事件的绑定

注意ES6的语法   
可以在构造函数里绑定this –> this.forceUpdateHandler = this.forceUpdateHandler.bind(this);  
或者调用时绑定： onClick = \{this.changeUserInfo.bind(this,50)\}  
子页面向父页面传递参数的方法

在子页面中通过调用父页面传递过来的事件 props 进行组件间的参数传递  
好好理解这里的onChange事件，为什么不用onBlur  
可复用组件，真正让React开发快速，高效的地方  
Prop 验证

可复用组件  
const propTypes = \{id:PropTypes.number.isRequired,url:PropTypes.string.isRequired,text:ProtoTypes.string\};  
1  
使用方法:BodyIndex.propTypes = \{userid:React.PropTypes.number.isRequired\};  
默认Prop值

const defaultProps = \{text:’Hello World’\};  
使用方法： BodyIndex.defaultProps = defaultProps;  
传递所有参数的快捷方式

组件的Refs  
原生JS获取方法：

var myDiv = document.getElementById(‘myDiv’);  
ReactDOM.findDOMNode(myDiv).style.color = ‘green’;  
方法二的定义

方法二的获取： this.refs.myInput  
refs是访问到组件内部DOM结点唯一可靠的方法  
refs会自动销毁对子组件的引用–> 析构  
不要在render或render之前对refs进行调用  
不要滥用refs  
独立组件间共享Mixins  
不同组件之间共用功能、共享代码  
官方文档  
和页面具有类似的生命周期  
ES6下的使用需要安装插件  
关于Mixins的讨论文章  
React样式  
内联样式  
CSS命名规范：dialog\_\_confirm-button–highlight  
是在render函数里定义的

const styleComponentHeader = \{  
  header: \{  
    backgroundColor: "\#3c3c3c",  
    color: "white", // --> 都要加引号  
    "padding-top": "15px", // --> CSS写法要加引号  
    paddingBottom: "15px"  
  \}  
  // 还可以定义其他的一些样式  
\};  
1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
注意样式的驼峰写法

style=\{styleComponentHeader.header\}  
注意class需要更改成className  
缺点是动画、伪类（hover）等不能用  
内联样式中的表达式  
paddingBottom:(this.state.miniHeader) ? “3px” : “15px”  
注意好好理解这里的state引起样式的即时变化  
CSS模块化，学习如何使用require进行样式的引用  
CSS模块化 webpack.confing.js

\{ test: /\\.css$/,  
        loader: 'style-loader!css-loader?modules&importLoaders=1&localIdentName=\[name\]\_\_\[local\]\_\_\[hash:base64:5\]'  
      \}  
1  
2  
3  
4  
5  
babel-plugin-react-html-attrs  
style-loader  
css-loader  
导入： var footerCss = require(“../../css/footer.css”);  
使用  
:local(.normal)\{color:green;\}  
:global(.btn)\{color:red;\}  
CSS模块化优点   
所有样式都是local的，解决了命名冲突和全局污染问题  
class名生成规则配置灵活，可以以此来压缩class名  
只需引用组件的JS就能搞定组件所有的JS和CSS  
依然是CSS，几乎零学习成本  
JSX样式与CSS的互转  
在线转换工具  
一个非常好用的样式框架Ant Design样式框架介绍  
material-ui  
ant design  
Ant Design的使用  
React Router  
Router概念  
demo代码的逻辑结构

首页   
详情页面，主体部分共享于首页  
列表页面  
其他平级页面  
控制页面的层级关系

单页面构建Router控制  
react-router 实例  
底层机制：   
React：state/props –> Components –> UI  
Router： location –> Router –> UI  
Router参数传递  
理解参数传递的重要意义  
定义的方法: path=”list/:id”  
params  
to  
\---------------------   
作者：Elle\_Peng   
来源：CSDN   
原文：https://blog.csdn.net/elle\_peng/article/details/80811648   
版权声明：本文为博主原创文章，转载请附上博文链接！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70]: /images/20220422/7907718ee551440884b1f58a0f98005e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 1]: /images/20220422/7baa8f3193f5477ca296412d87719ab8.png