React入门基础知识总结

时间 2019-12-10

标签 react 入门基础知识总结栏目 React 繁體版

原文原文链接

1.React组件

function组件，

function Button() {
  return ()
}

class组件，来自ES6的class语法，

class Button extends React.Component{
  constructor(){
    super()
  }
  render(){
    return()
  }
}

2. 父子组件通讯

父组件经过props给子组件传递数据，
子组件则是经过调用父组件传递给它的函数向父组件传递数据，调用时注意bind(this)

3. Redux（主要用于父子组件之间的通讯）

3.1 VanillaJS

根据state和action建立一个reducer
由reducer建立一个存放状态的store
须要更改数据时，经过store.dispatch一个action来进行更改。例如store.dispatch({type: add},payload: 1)
store.subscribe(render)监听store中state的变化，而后从新render

核心代码css

<body>
  <div>
    你点击了 <span id="value">0</span> 次
    <div>
      <button onclick="add1()">+1</button>
      <button onclick="minus()">-1</button>
      <button onclick="addIfOdd()">若是是单数就+1</button>
      <button onclick="addAsync()">1秒钟后+1</button>
    </div>
  </div>
  <script>
    function add1(){
      store.dispatch({type: 'increase'})
    }
    function minus(){
      store.dispatch({type: 'decrease'})
    }
    function addIfOdd(){
      if (store.getState() %2 === 1){
        store.dispatch({type: 'increase'})
      }
    }
    function addAsync(){
      setTimeout(()=>{
        store.dispatch({type:'increase'})
      },1000)
    }
    function reducer(state,action){
      if (state === undefined){
        return 0
      }
      switch(action.type){
        case 'increase' : 
          return state + 1;
        case 'decrease':
          return state - 1;
        default:
          return state;
      }
    }
    store = Redux.createStore(reducer)
    const render = function(){
        document.querySelector('#value').innerHTML = store.getState()
    }
    render()
    store.subscribe(render)
  </script>
</body>

</html>

3.2 React+Redux

代码结构和原生js的redux1-2-3-4差很少
增长了react父子组件之间的通讯

3.3 React-redux

父组件中建立store,用<Provider store={store}></Provider>包裹子组件

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>, 
  document.getElementById('root')
);

mapStateToProps,mapDispatchToProps两个函数将Provider传入的store接收，导出子组件时用connect函数，使得子组件的props接收state和dispatch。
不须要subscribe(render)了

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


class App extends Component {
  add1IfOdd(){
    if(this.props.n %2 === 1){
      this.props.add1()
    }
  }
  render() {
    return (
      <div>
        你点击了 <span id="value">{this.props.n}</span> 次
        <div>
          <button id="add1" onClick={()=> this.props.add1()}>+1</button>
          <button id="add2" onClick={()=> this.props.add2()}>+2</button>
          <button id="add1IfOdd"  onClick={()=>{this.add1IfOdd()}}>若是是单数就+1</button>
          <button id="add1After2Sec">两秒钟后+1</button>
        </div>
      </div>
    );
  }
}

function mapStateToProps(state){
  return {
    n: state.n
  }
}
function mapDispatchToProps(dispatch) {
  return {
    add1: ()=> dispatch({type:'add', payload: 1}),
    add2: ()=> dispatch({type: 'add',payload: 2})
  }
}

export default connect(mapStateToProps,mapDispatchToProps)(App);

4. Context API 的使用

主要应用于不一样层级的组件须要访问一样的数据，使用context能够避免经过中间元素传递props。html

// Context 可让咱们无须明确地传遍每个组件，就能将值深刻传递进组件树。
// 为当前的 theme 建立一个 context（“light”为默认值）。
const ThemeContext = React.createContext('light');

class App extends React.Component {
  render() {
    // 使用一个 Provider 来将当前的 theme 传递给如下的组件树。
    // 不管多深，任何组件都能读取这个值。
    // 在这个例子中，咱们将 “dark” 做为当前的值传递下去。
    return (
      <ThemeContext.Provider value="dark">
        <Toolbar />
      </ThemeContext.Provider>
    );
  }
}

// 中间的组件不再必指明往下传递 theme 了。
function Toolbar(props) {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

class ThemedButton extends React.Component {
  // 指定 contextType 读取当前的 theme context。
  // React 会往上找到最近的 theme Provider，而后使用它的值。
  // 在这个例子中，当前的 theme 值为 “dark”。
  static contextType = ThemeContext;
  render() {
    return <Button theme={this.context} />;
  }
}

5. Hooks API 的使用

Hook 是 React 16.8 的新增特性。它可让你在不使用 class 组件的状况下使用 state 以及其余的 React 特性。react

useState
useEffect

当你调用 useEffect 时，就是在告诉 React 在完成对 DOM 的更改后运行你的“反作用”函数。因为反作用函数是在组件内声明的，因此它们能够访问到组件的 props 和 state。默认状况下，React 会在每次渲染后调用反作用函数 —— 包括第一次渲染的时候。git

6. React Router

核心代码github

ReactDOM.render(
  <Router>
    <div>
      <div>
        <Link to="/">
          <button>首页</button>
        </Link>{" "}
        |<Link to="/login">登陆</Link> |<Link to="/signup">注册</Link> |
        <Link to="/welcome">欢迎</Link>
      </div>
      <Route path="/" exact component={App} />
      <Route path="/login" component={Box2} />
      <Route path="/signup" component={Box1} />
      <Route path="/welcome" component={Welcome} />
    </div>
  </Router>,
  rootElement
);

7. React的生命周期

查阅文档
常见面试题目见笔记。面试

8. CSS in React

传统css 方式，注意class的命名
css in js

1.styled-components https://codesandbox.io/s/rjr43532wo
2.emotion
3.css modulesredux

普通应用使用 styled-components 和 css modules，由于类名会变成随机字符串,
库使用传统 CSS 方式，由于类名不会变成随机字符串。ide