React基础(跟着官方的demo走一遍)

跟着官方的 demo 走,最终还是放弃了

React

初始化(node + npm)

npx create-react-app Name

组件化

小写字母开头的组件会被视为原生DOM标签,组件名称必须以大写字母开头,绑定传入的参数视为props的属性。

• 建议使用类定义:

class Name extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

生命周期

• 挂载卸载

  1. constructor()

     完成数据的初始化,接受两个参数：props 和 context , 用 super() 传入

  2. componentWillMount

     初始化，渲染前

  3. componentDidMount

     渲染后

  4. componentWillUnmount

     删除前

• 更新

  1. componentWillReceiveProps (nextProps)

     接收到 prop 更新后(初始化时不会调用)

  2. shouldComponentUpdate(nextProps,nextState)

     接收到 props 或 state 时(初始化或用 forceUpdate 不会调用)

  3. componentWillUpdate (nextProps,nextState)

     接收到新的 props 或 state ,渲染前

  4. componentDidUpdate(prevProps,prevState)

     完成更新后调用(初始化时不会调用)

  5. render()

     渲染后

事件处理

handleClick = (e, props) => {}
 this.handleClick(e, props)}>

进阶

• React.lazy

  说明:

  const Component = React.lazy(() => import('./Component'));
  

• 路由

  说明: 待补充

• Context

  有自己的作用域

  const {Provider, Consumer} = React.createContext(defaultValue);
  
  <Provider value={/*共享的数据*/}>
  /*里面可以渲染对应的内容*/
  </Provider>
  
  <Consumer>
  {value => /*根据上下文  进行渲染相应内容*/}
  </Consumer>
  

• 错误边界

  …我不想努力了