React从入门到进阶(一)
2019-03-28 本文已影响0人
子不语静守花开
前言：
react 和 react native的区别？
react 就是最全面的react脚手架
react native是专门写移动app的。
一、使用npm 配置react开发环境
1、 项目初始化
npm init
2、安装必要的包
cnpm install ~ --save
react react-dom babel-preset-react babelify
babel-preset-es2015 // es2015
******************************************华丽分割线******************************************
二、webpack热加载配置
1、 安装必要的插件
cnpm install webpack webpack-dev-server --save
******************************************华丽分割线******************************************
三、React组件基础
1、react 虚拟DOM概念
在呈现实际的Web页面之前，首先编排出虚拟化的DOM元素，在确定了要显示的内容和显示方式后，再将HTML页面渲染出来
2、react组件
01、 组件的return函数里返回的HTML节点必须是一个
02、可以给外部使用的组件定义：
export default class ComponentHeader extends React.Component{}
03、入口的定义：
ReactDOM.render(<Index/>, document.getElementById('example'));
3、 react多组件嵌套
image.png
4、JSX内置表达式
image.png
export default class BodyIndex extends React.Component {
render() {
var userName = '';
var boolInput = false;
var html = "Demo Lesson";
return (
<h2>页面的主体内容</h2>
<p>{userName == '' ? '用户还没有登录' : '用户名：' + userName}</p>
<p>
<input type="button" value = {userName} disabled={boolInput} />
</p>
{/* 注释 */}
<p>{html}</p>
<p dangerousSetInnerHTML = {{__html: html}}></p>
)
}
}
5、生命周期
image.png
https://blog.csdn.net/qq_43258252/article/details/87857490 值得看的博客
******************************************华丽分割线******************************************
四、React属性和事件
1、state属性
image.png
export default class BodyIndex extends React.Component {
constructor(){
super(); // 调用基类的所有初始化方法
// 初始化赋值
this.state = {
username: 'Estelle',
age: 20
}
}
render() {
setTimeout( () => {
//更改state时候
this.setState({ username: 'www',age: 30,})
})
return (
<div>
<p>{this.state.username} {this.state.age}</p>
</div>
)
}
}
2、props属性
image.png
01、 父组件向子组件传值
//父组件 传递参数
<BodyIndex userid={12345} username={'sss'}/>
//子组件 接受参数
<p>接收到父页面的属性：userid:{this.props.userid} username:{this.props.username}</p>
3、事件与数据的双向绑定
image.png
01、事件的调用
export default class BodyIndex extends React.Component {
//构造函数
constructor(){
super();
// 初始化赋值
this.state = {
username: 'Estelle',
age: 20
}
};
// 改变用户信息
changeUserInfo1() {
this.setState({age:50}) // 默认值
};
// 改变用户信息
changeUserInfo2() {
this.setState({age:age}) // 用户自己传入值
};
render() {
return (
<div>
<p>{this.state.username} {this.state.age}</p>
<p>{this.props.userid} {this.props.username}</p>
<p>age: {this.state.age}</p>
<input type="button" value="提交" onClick={this.changeUserInfo.bind(this)}/>
<input type="button" value="提交" onClick={this.changeUserInfo.bind(this,99)}/>
</div>
)
}
}
02、子组件向父组件传值
// 子组件向父组件传值，只能通过方法，方法的参数来进行传入
//父组件中
import BodyChild from './bodyChild'
// 接收子组件传来的方法
handleChildValueChange(event){
this.setState({age: event.target.value});
};
<BodyChild handleChildValueChange={this.handleChildValueChange.bind(this)}/>
// 子组件中
export default class BodyChild extends React.Component {
render() {
return (
<div>
<p>子页面输入： <input type="text" onChange={this.props.handleChildValueChange}/></p>
</div>
)
}
}
image.png
4、可复用组件
image.png
01、传值验证 爷孙传值
index.js
<BodyIndex userid={12345} username={'sss'}/>
bodyIndex.js
import React from 'react';
import BodyChild from './bodyChild'
const defaultProps = {
username: '这是一个默认的用户名'
}
export default class BodyIndex extends React.Component {
constructor(){
super();
this.state = {
username: 'Estelle',
age: 20
}
};
// 接收子组件传来的方法
handleChildValueChange(event){
this.setState({age: event.target.value});
};
render() {
return (
<div>
<p>{this.state.username} {this.state.age}</p>
{/* 父组件传过来的值 */}
<p>{this.props.userid} {this.props.username}</p>
<BodyChild {...this.props} id={4} handleChildValueChange={this.handleChildValueChange.bind(this)}/>
</div>
)
}
}
// 对传来的内容进行验证
BodyIndex.propTypes = {
userid: React.PropTypes.number.isRequired
}
// 给个默认值 如果传过来的有值 那就覆盖默认值
BodyIndex.defaultProps = defaultProps
bodyChild.js
import React from 'react';
import ReactDOM from 'react-dom';
export default class BodyChild extends React.Component {
render() {
return (
<div>
<p>子页面输入： <input type="text" onChange={this.props.handleChildValueChange}/></p>
<p>爷爷页面传过来的值： userid:{this.props.userid} username: {this.props.username}
父页面传过来的值：id:{this.props.id}</p>
</div>
)
}
}
5、组件的refs
image.png
获取原生的DOM节点
import React from 'react';
import ReactDOM from 'react-dom'
export default class BodyIndex extends React.Component {
//构造函数
constructor(){
super();
this.state = {
username: 'Estelle',
age: 20
}
};
// 改变用户信息
changeUserInfo2() {
this.setState({age:age})
// 第一种方式 不推荐(安全，性能上面不好)
var mySubmitButton = document.getElementById('submintButton');
// console.log('mySubmitButton',mySubmitButton);
ReactDOM.findDOMNode(mySubmitButton).style.color = 'red'
// 第二种方式 refs
// console.log(this.refs.submintButton)
this.refs.submintButton.style.color = 'yellow'
};
render() {
return (
<div>
<p>age: {this.state.age}</p>
<input id="submitButton" type="button" value="提交" onClick={this.changeUserInfo.bind(this,99)}/>
<input ref="submitButton" type="button" value="提交" onClick={this.changeUserInfo.bind(this,99)}/>
</div>
)
}
}
6、独立组件间共享 Mixins
image.png
mixins.js
const MixinLog = {
componentDidMount(){
console.log("componentDidMount");
},
log() {
console.log("aba");
}
}
export default MixinLog;
bodyIndex.js
// 安装插件
cnpm install --save react-mixin@2
// bodyIndex.js
import React from 'react';
import ReactDOM from 'react-dom'
import ReactMixin from 'react-mixin'
import MixinLog from './mixins'
export default class BodyIndex extends React.Component {
//构造函数
constructor(){
super();
this.state = {
username: 'Estelle',
age: 20
}
};
// 改变用户信息
changeUserInfo2() {
this.setState({age:age})
this.refs.submintButton.style.color = 'yellow'
MixinLog.log() // 调用
};
render() {
return (
<div>
<p>age: {this.state.age}</p>
<input ref="submitButton" type="button" value="提交" onClick={this.changeUserInfo.bind(this,99)}/>
</div>
)
}
}
ReactMixin(BodyIndex.prototype,MixinLog)
******************************************华丽分割线******************************************
五、React样式
1、内联样式
image.png
import React from 'react';
export default class ComponentHeader extends React.Component{
render(){
// 第一种: 内联写法
const styleComponentHeader = {
header: {
backgroundColor: '#333', // 驼峰
color: 'yellow',
paddingTop: '15px',
}
// 还可以定义其他样式
}
return (
<header style={styleComponentHeader.header} className="smallFontSize">
<h1>这是头部</h1>
</header>
)
}
}
2、内联样式中的表达式
image.png
import React from 'react';
export default class ComponentHeader extends React.Component{
constructor(){
super();
this.state = {
miniHeader: false
}
};
// 通过改变方法来改变样式
switchHeader(){
this.setState({
miniHeader: !this.state.miniHeader
})
}
render(){
const styleComponentHeader = {
header: {
backgroundColor: '#333',
color: 'yellow',
paddingTop: (this.state.miniHeader) ? "3px":"15px", // **
}
}
return (
<header style={styleComponentHeader.header}
onClick={this.switchHeader.bind(this)}>
<h1>这是头部</h1>
</header>
)
}
}
3、css模块化 **
image.png
安装配置插件：
cnpm install babel-plugin-react-html-attrs style-loader css-loader --save
4、JSX样式与CSS的互转
image.png
转换地址：https://staxmanade.com/CssToReact/
import React from 'react';
export default class ComponentFooter extends React.Component{
render(){
var footerConvertStyle = {
{
"miniFooter": {
"backgroundColor": "#333",
"color": "#fff",
"paddingLeft": "20px",
"paddingTop": "30px",
"paddingBottom": "3px"
},
"miniFooter_h1": {
"fontSize": "15px"
}
}
};
return (
<footer style={footerConvertStyle.miniFooter}>
<h1 style={footerConvertStyle.miniFooter_h1}>这里是页脚</h1>
</footer>
)
}
}
5、Ant Design样式框架介绍和使用
安装
cnpm install antd --save
******************************************华丽分割线******************************************
六、React Router
1、Router概念
安装路由：
cnpm install react-router --save
image.png
router.js
import React from 'react'
import ReactDOM from 'react-dom'
import Index from './index'
import ComponentList from './components/list'
import ComponentDetails from './components/details'
import {Router,Route,hashHistory} from 'react-router'
export default class Root extends React.Component{
render(){
return(
// 这里是程序的入口 history = {hashHistory}可以控制前进后退的
<Router history = {hashHistory}>
<Route component= {Index} path= "/">
<Route component= {ComponentDetails} path= "details"></Route>
</Route>
<Route component= {ComponentList} path= "list"></Route>
</Router>
)
}
}
ReactDOM.render(<Root/>, document.getElementById('example'));
header.js
import React from 'react';
import {Link} from 'react-router'
export default class ComponentHeader extends React.Component{
constructor(){
super();
};
render(){
return (
<header>
<h1>这是头部</h1>
<ul>
<li><Link to={'/'}>首页</Link></li>
<li><Link to={'/details'}>嵌套的详情页面</Link></li>
<li><Link to={'/list'}>列表页面</Link></li>
</ul>
</header>
)
}
}
index.js
return (
<div>
<ComponentHeader/>
<BodyIndex userid={12345} username={'sss'}/>
{/* 嵌套details页面 */}
<div>
{this.props.children}
</div>
<ComponentFooter/>
</div>
);
2、Router参数传递
image.png
// router.js
<Route component= {ComponentList} path= "list/:id"></Route>
// header.js
<li><Link to={'/list/1234'}>列表页面</Link></li>
// list.js
<h2>这是列表页面 Id: {this.props.params.id}</h2>
