react

pc端开发 先统一所有浏览器的样式

https://meyerweb.com/eric/tools/css/reset/

安装react-cli  

npx create-react-app my-react-app

安装 axios

yarn add axios --save

安装 styled-components  (使各个模块的css独立出来)

yarn add styled-components

第一步  把css文件改成js文件

第二部  import {createGlobalStyle } from 'styled-components';  (全局样式组件方法)

style.js

//1引入全局样式方法
import {createGlobalStyle } from 'styled-components';

//2定义并暴露全局样式
export const GlobalStyled =createGlobalStyle`
  body{
    margin:0;
    padding:0;
    background:blue;
  }

APP.js

//3引入全局样式 并以组件的形式使用
import {GlobalStyled} from './style'

function App() {
  return (
    <div className="App">
      <GlobalStyled/>
      hello world
    </div>
  );
}

export default App;

 第三部  import styled from 'styled-components';  (局部样式组件方法)

common公用的组件 中的index.js

import styled from 'styled-components';

export const HeaderWrapper=styled.div`
    height:56px;
    background:red;
`

common公用的组件的样式

import React,{Component} from 'react';
import {HeaderWrapper} from './style';
class Header extends Component{
    render(){
        return (
            <HeaderWrapper>hello world</HeaderWrapper>
        )
    }
}

export default Header;

安装scss 

yarn add node-sass

 scss用法

import React ,{Component} from 'react';
import './index.scss';

class TodoList extends Component{
    render(){
        return (
            <div>
                <ul>
                    <li>hello world</li>
                    <li>happy</li>
                </ul>
            </div>
        )
    }
}


export default TodoList;

 安装ant-design

yarn add antd --save

 ant-design库的用法

import React ,{Component} from 'react';
import 'antd/dist/antd.min.css';
import './index.scss';
import {Button} from 'antd';
class TodoList extends Component{
    render(){
        return (
            <div>
                <Button type="primary" className="btn">Button</Button>
            </div>
        )
    }
}


export default TodoList;

安装prop-types库   

yarn add  prop-types --save

prop-types 库的用法

import React,{Component} from 'react';
//1引入prop-types库
import PropTypes from 'prop-types';

class Child extends Component{
    constructor(props){
        super(props);
        this.state={
            item:this.props.content
        }

    this.handleClick=this.handleClick.bind(this);
    }
    handleClick(){
        this.props.delmethods(this.props.index)
    }
    render(){
        return (
            <div onClick={this.handleClick}>
                {this.state.item}
            </div>
        )
    }
}

//2数据类型校验
Child.propTypes= {
    // 表示content类型要是string 且必须要传递
    content:PropTypes.string.isRequired,
    delmethods:PropTypes.func,
    index:PropTypes.index,
    test:PropTypes.string
}

//3如果父组件没传递数据 可以定义默认值
Child.defaultProps={
    test:'hello'
}

export default Child;

shouldComponentUpdate用法

shouldComponentUpdate(nextProps,nextState){
    if(nextProps.content!==this.props.content){
          return true;
  } else{
       return false;  
    }
}

安装react-redux

yarn add react-redux --save

react-redux的用法

用法 主要就两部
- 第一步 被Provider包裹的子组件 内部可以直接调用store中的数据
- 第二部 connect(mapStateToProps,mapDispatchToProps)(TodoList)
- mapStateToProps 主要负责 将store中的state数据映射到TodoList的props属性中
- mapDidpatchToProps 主要负责将props中的方法可以通过dispatch方法发送action到store中的reducer内 修改store中的state数据
挂载节点 第一步使用Provider组件
index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import reportWebVitals from './reportWebVitals';
import TodoList from './TodoList/index';
import store from './store/index';

//Provider组件  可以是内部的所有子组件都可以获得store的数据
import {Provider} from 'react-redux';

const App=(
  <Provider store={store}>
    <TodoList></TodoList>
  </Provider>
)


ReactDOM.render(
  App,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

store中的index.js

//引入redux  createStore  创建store
//applyMiddleware 方法允许redux 使用中间件
import { createStore, applyMiddleware, compose } from "redux";
import reducer from "./reducer";
import thunk from "redux-thunk";

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
  ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
      // Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...
    })
  : compose;

const enhancer = composeEnhancers(
  applyMiddleware(thunk)
  // other store enhancers if any
);
//创建store  并把reducer存入store中
const store = createStore(
  reducer,
  enhancer
//   applyMiddleware(thunk)
  // rudex dev tools  chrome 插件 使用
  // window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

export default store;

store中的reducer.js

const defaultState={
    inputValue:'',
    list:[1,3,4,5,5]
}

export default (state=defaultState,action)=>{
    if(action.type==='change_input_value'){
        const newState=JSON.parse(JSON.stringify(state));
        newState.inputValue=action.value;
        console.log(newState)
        return newState;
    }
    if(action.type==='add_todo_list'){
        const newState=JSON.parse(JSON.stringify(state));
        if(newState.inputValue===''){
            return newState;
        }
        newState.list.push(newState.inputValue);
        newState.inputValue='';
        return newState;
    }
    if(action.type==="delete_todo_list"){
        console.log(1)
        const newState=JSON.parse(JSON.stringify(state));
        newState.list.splice(action.value,1);
        return newState;
    }
    return state;
}

TodoList组件中的index.js

import React, { Component } from "react";
import { connect } from "react-redux";

//无状态组件是一个函数

const TodoList = (props) => {
  const { inputValue, changeInputValue, handleClick, handleDel } = props;
  return (
    <div>
      <div>
        <input type="text" onChange={changeInputValue} value={inputValue} />
        <button type="button" className="btn" onClick={handleClick}>
          输入
        </button>
      </div>
      <ul className="list">
        {props.list.map((item, index) => {
          return (
            <li onClick={handleDel.bind(this, index)} key={index}>
              {item}
            </li>
          );
        })}
      </ul>
    </div>
  );
};

// class TodoList extends Component {
//   constructor(props) {
//     super(props);
//   }
//   render() {
//       const { inputValue, changeInputValue, handleClick, handleDel } = this.props;
//       return (
//       <div>
//         <div>
//           <input type="text" onChange={changeInputValue} value={inputValue} />
//           <button type="button" className="btn" onClick={handleClick}>
//             输入
//           </button>
//         </div>
//         <ul className="list">
//           {this.props.list.map((item, index) => {
//             return (
//               <li onClick={handleDel.bind(this,index)} key={index}>
//                 {item}
//               </li>
//             );
//           })}
//         </ul>
//       </div>
//     );
//   }
// }

const mapStateToProps = (state) => {
  return {
    inputValue: state.inputValue,
    list: state.list,
  };
};

const mapDispatchToprops = (dispatch) => {
  return {
    changeInputValue(e) {
      const action = {
        type: "change_input_value",
        value: e.target.value,
      };
      // console.log(e.target.value)
      dispatch(action);
    },
    handleClick() {
      const action = {
        type: "add_todo_list",
      };
      dispatch(action);
    },
    handleDel(index) {
      const action = {
        type: "delete_todo_list",
        value: index,
      };
      dispatch(action);
    },
  };
};

//connect(mapStateToProps,mapDispatchToprops) 方法的作用使TodoList和store链接
//并按照mapStateToProps的规则下将store中的数据映射到TodoList的props中
//store.dispatch映射到TodoList组件的props上 可以让props上的方法能够调用dispatch来操作store中的数据
export default connect(mapStateToProps, mapDispatchToprops)(TodoList);