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

这篇博客深入浅出地介绍了React的基础知识,包括如何进行初始化设置、理解组件化的概念,详细探讨了组件的生命周期,从挂载、更新到卸载的不同阶段。此外,还提到了事件处理和进阶特性如React.lazy。虽然作者在学习过程中遇到了挑战,但这个过程对于理解React的运作方式非常有帮助。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

跟着官方的 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()

      完成数据的初始化,接受两个参数:propscontext , 用 super() 传入

    2. componentWillMount

      初始化,渲染前

    3. componentDidMount

      渲染后

    4. componentWillUnmount

      删除前

  • 更新

    1. componentWillReceiveProps (nextProps)

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

    2. shouldComponentUpdate(nextProps,nextState)

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

    3. componentWillUpdate (nextProps,nextState)

      接收到新的 propsstate ,渲染前

    4. componentDidUpdate(prevProps,prevState)

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

    5. render()

      渲染后

事件处理

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

进阶

  • React.lazy

    说明:

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

    说明: 待补充

  • Context

    有自己的作用域

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

    …我不想努力了

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值