react基础

一、基础

1.1、项目结构

创建命令 create-react-app 项目名
npm start 启动项目

├── README.md                           使用方法的文档
├── node_modules                    所有的依赖安装的目录
├── package-lock.json           锁定安装时的包的版本号,保证团队的依赖能保证一致。
├── package.json
├── public                              静态公共目录
└── src                                     开发用的源代码目录

1.2、jsx

jsx = js + xml
jsx是React.createElement的语法糖

创建

import React from "react";
import reactDom from "react-dom";

//函数式组件
function Test1(props) {
    return <div>
        props.title
    </div>;
}

//类创建
class Test2 extends React.Component {
    constructor(props) {
        super(props)
        //state状态值 一定要写在里面
        this.state = {
            n:0
        }
    }

    render() {
        let {title} = this.props

        return <div>
            <button className={'btn'} onClick={}>{this.state.n}</button>
        </div>;
    }

    //按钮的回调函数
    click = ev => {
        this.setState({n:this.state.n + 1})
    }
}

//限定Test2中props中title的数据类型
Test2.prototype = {
    title:PropTypes.string
};


//调用
reactDom.render(<div>
    <Test1 title={'test1'}/>
    <Test2 title={'test1'}/>
</div>)

1.3、重要属性

this.props.children

在自定义的<Child>组件中 this.props.children代表自定义组件中的内容
即<span>{'==>app'}</span>

<Child>
  <span>{'==>app'}</span>
</Child>

PropTypes类型检查

限定props变量的类型

import PropTypes from 'prop-types';

ref可以随时拿到实际的节点

<input type="text" ref="myTextInput" />

handleClick: function() {
    this.refs.myTextInput.focus();
}

1.4、生命周期

props、state改变 组件会更新

react_生命周期.jpg

1.4、组件间通信

父传子

通过子组件的props

子传父

通过子组件的props传递回调

1.5、router

npm install -S react-router-dom

route

import { HashRouter, Redirect, Route } from 'react-router-dom'
import Home from './Home';

ReactDOM.render((
  //根路由
  <HashRouter>
    //具体路由
    <Route path="/home" component={Home}/>
    <Route path="/a" component={A}/>
    <Route path="/b" component={B}/>
    //重定向路由 to指向Route的path
    <Redirect from="/" to="/home" exact />
  </HashRouter>
),
  document.getElementById('root')
);

Link

用于组件跳转 替代<a>标签

import { Link } from 'react-router-dom'

<div>
    //to指向Route的path
    <Link to='/a'>AAA</Link>
</div>

路径通配符

:name 匹配一部分
() 可选
* 任意字符 非贪婪
** 任意字符 贪婪

二、Redux

store全局唯一 可以作为数据分发中心

import { createStore } from 'redux';
//回调 接收数据
function callback(state, action) {
  switch(action.type) {
    case 'type':
      console.log("cb==>"+JSON.stringify(action.data))
    break
  }
}
//创建store
let store = createStore(callback);
//发送事件及数据 action中的数据可以是任何类型
store.dispatch({type: 'type',  data:{d:"test"}});
//store中数据有变化 即回调
store.subscribe(listener);

applyMiddlewares()

拦截器功能

const store = createStore(
  reducer,
  initial_state,
  applyMiddleware(logger)
);

2、样式

行内样式/模块化

import common from "./common.module.css"

styleObj:{
    fontSize:'50px'
}


//行内样式
<h1 style={{'fontSize':'20px'}}>正在热映</h1>
//class样式
<h1 style={this.styleObj}>即将上映</h1>
//可以直接引用模块化样式
<h1 className={common.error}>异常信息</h1>

三、补充