React基础备忘记录

测试脚手架基于：

    https://cloud.tencent.com/developer/article/1395426

# React redux 测试

Counter.js

import React, { Component } from 'react';
import { createStore } from 'redux';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';

// ============action================
const ADD_ONE = 'ADD_ONE';
const MINUS_ONE = 'MINUS_ONE';
// =============reducer=================
const initialState = {
  number: 0
};
function reducer(state = initialState, action) {
  switch (action.type) {
    case ADD_ONE:
      return {
        number: state.number + 1
      };
    case MINUS_ONE:
      return {
        number: state.number - 1
      };
    default:
      return state;
  }
}
// ==============store======================
const Store = createStore(reducer);
// ====================================
const mapStateToProps = (state) => {
  return {
    number: state.number
  };
}
// ====================================

const containerStyle = {
  ...
}
const buttonStyle = {
  ...
}

const propTypes = {
  dispatch: PropTypes.func.isRequired,
  number:PropTypes.number.isRequired
};

class Counter0 extends Component {
  addOne = () => {
    const { dispatch } = this.props;
    dispatch({ type: 'ADD_ONE' });
  }

  minusOne = () => {
    const { dispatch } = this.props;
    dispatch({ type: 'MINUS_ONE' });
  }

  render() {
    const { number } = this.props;

    return (
      <div>
        <h1>{number}</h1>
        <div style={containerStyle}>
          <button onClick={this.minusOne} type="button" style={buttonStyle}>-</button>
          <button onClick={this.addOne} type="button" style={buttonStyle}>+</button>
        </div>
      </div>
    );
  }
}

Counter0.propTypes = propTypes;

const Counter = connect(mapStateToProps)(Counter0)
export { Store, Counter};

App.jsx

import { Provider } from 'react-redux';
import {Counter,Store} from '../component/Counter';
 <Provider store={Store}>
    <Counter />
 </Provider>

# Router 4测试以及Prop传参

App.jsx

<ul>
    <li><Link to="/">App</Link></li>
    <li><Link to="/about">About</Link></li>
    <li><Link to="/dashboard">dashboard</Link></li>
    <li><Link to="/example">Example</Link></li>
    <li><Link to={`/example1/${name}/${id}?a=1&b=2#c=3`}>Example1</Link></li>
    <Route exact path="/" component={ShowcaseWelcome} />
    <Route path="/about" component={About} />
    <Route
      exact
      path='/dashboard'
      render={(props) => <About {...props} greeting='Welcome to React' />}
    />
    <Route path="/example" component={Example} />
    <Route path="/example1/:name/:id" component={Example1} />
</ul>

Example1.js（路由参数测试,如果需要进一步解析可以考虑qs或者自行编写参数解析函数）

const { match, location } = this.props;
<p>{match.params.id} - {location.search} -{location.hash} </p>
<Link to="/dashboard">
    <button type="button">
            GoTo
    </button>
</Link>

About.js（组件属性传参测试）

const { greeting } = this.props;
{greeting}

# typevalid测试

static defaultProps = {
	greeting: ""
}
const { value } = this.state
{value}
About.propTypes = {
  greeting: PropTypes.string// .isRequired
}

# react-hook测试

• 原结构

class Example1 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  componentDidMount() {
    const { count } = this.state;
    document.title = `You clicked ${count} times`;
  }

  componentDidUpdate() {
    const { count } = this.state;
    document.title = `You clicked ${count} times`;
  }

  render() {
    const { count } = this.state;
    const { match, location } = this.props;

    return (
      <div>
        <button type="button" onClick={() => this.setState({ count: count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

• 后结构

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button type="button" onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

参考:

[react-router学习笔记](https://blog.csdn.net/crystal6918/article/details/76549229)

[React Router 4 简易入门](https://blog.csdn.net/mjr99999/article/details/79373792)

[React-Router 4.0基础详解](https://blog.csdn.net/Mr_Dave/article/details/79028983)

[React Router 详解](https://blog.csdn.net/chenshun123/article/details/78999254)

[How to pass props to the route component in React router](https://learnwithparam.com/blog/how-to-pass-props-in-react-router/)

[How to pass props to components in React](https://www.robinwieruch.de/react-pass-props-to-component/)

[https://medium.com/alturasoluciones/how-to-pass-props-to-routes-components-29f5443eee94](How to pass props to React routes components)

[https://tylermcginnis.com/react-router-pass-props-to-components/](Pass props to a component rendered by React Router)

[https://stackoverflow.com/questions/42768620/onenter-not-called-in-react-router](onEnter not called in React-Router)

[https://medium.com/@felippenardi/how-to-do-componentdidmount-with-react-hooks-553ba39d1571](如何componentDidMount使用React Hooks？)

[https://stackoverflow.com/questions/38684925/react-eslint-error-missing-in-props-validation](React eslint error missing in props validation)

[https://blog.csdn.net/zn740395858/article/details/92798527](react常见错误解决)

[https://stackoverflow.com/questions/39082142/props-is-missing-from-props-validation](Props is missing from props validation)

[https://stackoverflow.com/questions/48681892/what-is-the-best-way-of-defining-optional-proptypes-in-react](What is the best way of defining optional propTypes in react?)

[https://github.com/yannickcr/eslint-plugin-react/issues/1957](Error: 'is missing in props validation' after update of ESLint to v5.4.0)

[https://github.com/yannickcr/eslint-plugin-react/issues/2121](must be placed on a new line react/jsx-one-expression-per-line )

[https://medium.com/javascript-scene/do-react-hooks-replace-redux-210bab340672](Do React Hooks Replace Redux?)

[https://cloud.tencent.com/developer/article/1521587](学习 React Hooks 可能会遇到的五个灵魂问题)

[https://juejin.im/post/5d478b2d518825673a6ae1b9](为什么会出现React Hooks?)

[https://juejin.im/post/5d0ae589518825122925c2de](Talking about hooks)

[https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889](Making Sense of React Hooks)

[https://blog.bitsrc.io/why-we-switched-to-react-hooks-48798c42c7f](Why We Switched to React Hooks)

[https://zhuanlan.zhihu.com/p/50597236](一篇看懂 React Hooks)

[https://medium.com/better-programming/here-are-6-awesome-react-hooks-2ff0c0b35218](Here Are 6 Awesome React Hooks)

[https://medium.com/@chathuranga94/introduction-to-react-hooks-4694fe2d0fc0](Introduction to React Hooks)

[https://glennstovall.com/how-to-use-useeffect-and-other-hooks-in-class-components/](How to Use useEffect (and other hooks) in Class Components)

[https://stackoverflow.com/questions/56772703/useeffect-alternate-for-class-component](useEffect alternate for Class Component)

[https://dev.to/pallymore/use-hooks-in-class-components-too-2nog](Use Hooks In Class Components Too)

[https://reactjs.org/docs/hooks-effect.html](Using the Effect Hook)

[https://stackoverflow.com/questions/29852998/getting-query-parameters-from-react-router-hash-fragment](Getting query parameters from react-router hash fragment)

[https://stackoverflow.com/questions/43216569/how-to-get-query-parameters-in-react-router-v4](How to get query parameters in react-router v4)

[https://medium.com/better-programming/how-to-pass-multiple-route-parameters-in-a-react-url-path-4b919de0abbe](How To Pass Multiple Route Parameters in a React URL Path)

[https://stackoverflow.com/questions/46484026/eslint-react-router-v4-how-to-validate-match-params-props](ESLint React-Router v4 - How to validate Match params props?)

[https://stackoverflow.com/questions/47519612/eslint-match-is-missing-in-props-validation-react-prop-types](Eslint - 'match' is missing in props validation react/prop-types)

[https://github.com/ReactTraining/react-router/issues/6007](browserHistory doesn't exist in react-router)

[https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/migrating.md](Migrating from v2/v3 to v4)

[https://stackoverflow.com/questions/44471437/how-to-get-params-in-component-in-react-router-dom-v4](How to get params in component in react router dom v4?)

[https://stackoverflow.com/questions/39523040/concatenating-variables-and-strings-in-react](Concatenating variables and strings in React)

[https://stackoverflow.com/questions/46858840/unexpected-string-concatenation](Unexpected string concatenation)

[https://github.com/ReactTraining/react-router/issues/4571](Relative Routes + Links)

[https://stackoverflow.com/questions/35086162/react-render-link-containing-a-variable](React render link containing a variable)

[https://stackoverflow.com/questions/35043528/how-to-get-parameters-from-hash-url-with-react-router](How to get parameters from hash URL with react-router?)

[https://stackoverflow.com/questions/29852998/getting-query-parameters-from-react-router-hash-fragment/37981165](Getting query parameters from react-router hash fragment)

[https://github.com/BretCameron/Example-Redux-Counter/blob/master/src/Counter.js](Example-Redux-Counter)

[https://stackoverflow.com/questions/49771834/react-redirect-by-button-click-in-react-with-react-router-dom](React. Redirect by button click in React with react-router-dom)

[https://stackoverflow.com/questions/42463263/wrapping-a-react-router-link-in-an-html-button](Wrapping a react-router Link in an html button)

[https://medium.com/javascript-in-plain-english/the-only-introduction-to-redux-and-react-redux-youll-ever-need-8ce5da9e53c6](The only introduction to Redux and React-Redux you’ll ever need)

[https://itnext.io/how-to-use-redux-with-react-143de57d0bab](How to use Redux with React)

[https://medium.com/@bretcameron/a-beginners-guide-to-redux-with-react-50309ae09a14](A beginner’s guide to Redux with React)

[https://stackoverflow.com/questions/46039976/exporting-multiple-modules-in-react-js](exporting multiple modules in react.js)

[https://github.com/airbnb/react-sketchapp/issues/185](Exporting multiple components from 1 file)

[https://blog.csdn.net/ZYC88888/article/details/82501791](React export和export default的区别)

[https://medium.com/@etherealm/named-export-vs-default-export-in-es6-affb483a0910](Named Export vs Default Export in ES6)

[https://stackoverflow.com/questions/53352851/must-use-destructuring-props-assignment-react-destructuring-assignment](Must use destructuring props assignment react/destructuring-assignment)

[https://stackoverflow.com/questions/46913851/why-and-when-to-use-default-export-over-named-exports-in-es6-modules](Why and when to use default export over named exports in es6 Modules?)

[https://duanruilong.github.io/blog/2018/06/11/React%E5%BC%80%E5%8F%91%E5%B8%B8%E7%94%A8%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F-Redux/](React开发常用设计模式-Redux)

[https://stackoverflow.com/questions/39544713/why-my-redux-state-not-updating](why my redux state not updating)

[https://stackoverflow.com/questions/50532674/redux-mapstatetoprops-not-working](Redux- mapStateToProps not working)

[https://blog.csdn.net/u010977147/article/details/53412381](react-redux 之 connect 方法详解)

[https://medium.com/@rashminashrestha/mobx-vs-redux-with-react-58090605b02d](MobX vs Redux with React)

[https://flaviocopes.com/react-state-vs-props/](Props vs State in React)