React入门基础知识总结

2024年3月15日 281次阅读 来源: Grit0821

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

  1. 根据state和action创建一个reducer
  2. 由reducer创建一个存放状态的store
  3. 需要更改数据时，通过store.dispatch一个action来进行更改。例如store.dispatch({type: add},payload: 1)
  4. store.subscribe(render)监听store中state的变化，然后重新render

核心代码

<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

  1. 代码结构和原生js的redux1-2-3-4差不多
  2. 增加了react父子组件之间的通信

3.3 React-redux

  1. 父组件中创建store,用<Provider store={store}></Provider>包裹子组件
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>, 
  document.getElementById('root')
);
  1. mapStateToProps,mapDispatchToProps两个函数将Provider传入的store接收，导出子组件时用connect函数，使得子组件的props接收state和dispatch。
  2. 不需要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。

// 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 特性。

  • useState
  • useEffect

当你调用 useEffect 时，就是在告诉 React 在完成对 DOM 的更改后运行你的“副作用”函数。由于副作用函数是在组件内声明的，所以它们可以访问到组件的 props 和 state。默认情况下，React 会在每次渲染后调用副作用函数 —— 包括第一次渲染的时候。

6. React Router

核心代码

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 modules

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

    原文作者：Grit0821
    原文地址: https://segmentfault.com/a/1190000019624209
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞