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 方式，因为类名不会变成随机字符串。