React基础(跟着官方的demo走一遍)_react-clmtrackr-demo-优快云博客

本文链接：https://blog.youkuaiyun.com/Silencer_1/article/details/106546403

这篇博客深入浅出地介绍了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()
  
  完成数据的初始化,接受两个参数：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) => {}
<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>