react 介绍

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

 

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 
版权声明：本文为博主原创文章，转载请附上博文链接！