react学习大纲1-react基础知识

react环境配置与调试技巧

• 下载必要的包npm install --save-dev react react-dom babel-cli babel-preset-es2015 babel-preset-react

搭建项目基础架构用webpack2；

• npm init -y

webpack进行热加载的配置；

const webpack=require('webpack'),
    path=require('path'),
    HtmlWebpackPlugin=require('html-webpack-plugin'),//html模版
    ExtractTextWebpackPlugin=require('extract-text-webpack-plugin');//extract-text-webpack-plugin该插件的主要是为了抽离css样式,防止将样式打包在js中引起页面样式加载错乱的现象;
module.exports={
    entry:path.resolve(__dirname,'src/js/index.js'),
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'[name].js'
    },
    module:{
        rules:[
            {
                test:/\.js[x]?$/,
                use:'babel-loader',
                exclude:/node_modules/
            },
            {
                test:/\.css$/,
                use:ExtractTextWebpackPlugin.extract({
                    fallback:'style-loader',//编译后，用style-loader来提取css文件
                    use:'css-loader!less-loader',//用css-loader,less-loader来编译文件
                    publicPath:'./dist'　　//生成该css文件的文件路径；
                })
            }
        ]
    },
    plugins:[
        new ExtractTextWebpackPlugin({
            filename:'styles.css'
        }),
        new HtmlWebpackPlugin({
            filename:'index.html',
            template:'./index.html'
        })
    ]
}

react组件开发

• 导出:export default class Header extends React.Component
• 导入：import Header from './components/header';
• 渲染到html主页：ReactDom.render(,document.getElementById('app'));

react多组件嵌套

• 组件多层嵌套

• 使用变量渲染组件

render(){
    var component;
    var login=false;
    if(login){
        component=;
    }else{
        component=;
    }
    return(
        

            {component}
            
            
        
    )
}

JSX中常用的表达式和注释

• 变量和三元表达式；

{username==''?'用户还没登录':'用户名'+username}

• 注释：
  • 标签中，用 {/*注释*/}
• 在react中正确解析html； 比如空格用的

var html1='aaa     bbb';

生命周期

生命周期图

React属性和事件-State属性(页面组件自身的属性)

state和props都会影响模块的样式

• 过程： state-> virtual dom ->dom
• 设置和更改状态

//设置
constructor(){
    super();//调用基类的所有的初始化的方法；
    this.state={
        username:'ymy'
    };
}

setTimeout(()=>{
    //更改state的时候；
    this.setState({
        username:'哈哈哈哈'
    })
},4000);

• chrome的高亮显示设置
  • 在chrome的控制台-console-Rendering-选择 Paint Flashing即可；
• state属性小总结
  • 初始化：this.state={username:'ymy'};
  • 初始化可以放在构造函数 constructor中；记得必须写super()
  • 修改state:this.setState({username:'hahah'})
  • state的作用域只属于当前的类；不污染其他模块
  • state对于模块来说属于"自身"属性；

React属性和事件-props

• state和props =》component =》UI
• props对于模块属于外来属性；是父页面向子页面传递的参数；
• 传递参数：
• 模块中接收参数：{this.props.userid}

子组件向父组件传递参数；

• 事件绑定：注意ES6的语法：

• 子页面向父页面传递参数的方法：
  在子页面中通过调用父页面传递过来的事件props进行组件间的参数传递；

//子页面
子页面的输入：

//父页面函数
handleChildValueChange(e){
    this.setState({
        age:e.target.value
    })
}
//父页面标签

可复用的组件

• Prop验证：
  • 参考网站https://facebook.github.io/react/docs/typechecking-with-proptypes.html
  • 代码演示

//先导入
import PropTypes from 'prop-types';
//进行属性类型的设置：要求父组件给当前组件传的数据类型必须符合当前组件的要求
BodyIndex.propTypes={
    userid:PropTypes.number.isRequired //isRequired这个可省略；除非必须传
};

• 默认Prop值：

//进行属性默认值的设置：即父组件传了，按它传的来，没传，默认按照子组件设置的来；
BodyIndex.defaultProps={
    username:'哈哈'
};

• 传递所有参数的快捷方式

组件的refs

• 主要用来获取原生的节点的使用；
  • refs是访问到组件内部DOM节点唯一可靠的方法
  • Refs会自动销毁对子组件的引用
  • 不要在render或render之前对refs进行调用，因为元素还没加载进来；
  • 不要滥用refs；否则会造成很多性能问题；
• 定义ref:

  页面主题和内容

• 通过ref获取元素：this.refs.h2.style.color='red';

独立组件间共享Mixins

• 在不同的组件之间共用功能，共享代码
• 和页面具有类似的生命周期
• Es6下使用需要安装插件https://github.com/brigand/react-mixin
• 代码参考如下：

//定义一个共享对象，并导出
const MixinLog={
    componentWillMount(){
        console.log('Mixins准备开始加载')
    },
    log(){
        console.log('12334445......')
    }
};
export default MixinLog;

//安装并导入react-mixin模块
import ReactMixin from 'react-mixin';
//导入自定义的Mixins模块；自定义的都是相对路径
import MixinLog from './mixins';
//设置
ReactMixin(BodyIndex.prototype,MixinLog);
//使用
MixinLog.log();