前端学习-react组件

前端学习-react组件

初始化生命周期
  1. defaultProps在初始化之前来预先定义默认属性。例:SpecialView.defaultProps = { initialCount: 0 };
  2. constructor(props),初始化时设置this.state的值
  3. componentWillMount,render之前调用
  4. componentDidMount,render之后调用
  5. componentWillUnmount,界面上移除的时调用
更新组件

条件:state

  • state表示组件内部状态,只能在组件内部使用,state只应该用于存储简单的视图状态。
  • 当sate改变时render会被调用,页面就会刷新。
  • state不能直接修改,应该使用 setState() 方法修改

方法:

  • componentWillReceiveProps
  • shouldComponentUpdate
  • componentWillUpdate
  • componentDidUpdate
其他

事件处理

同html事件属性,推荐使用{::this.onClick}的方式绑定函数

DOM操作

  1. 组件加载之后通过 findDOMNode() 方法拿到组件对应的DOM元素
  2. 给标签添加ref属性,通过this.refs.name来获取DOM元素

组合

组件内嵌套组件,循环插入组件,这些子组件都可以从props.children传递。

通信

  • 父子组件通信通过props从父向子组件传递方法/数据
  • 非父子组件通信通过全局事件 Pub/Sub 模式,在 componentDidMount 里面订阅事件,在 componentWillUnmount 里面取消订阅,当收到事件触发的时候调用 setState 更新 UI
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 在React Native中使用组件来封装界面模块时,整个界面就是一个大的组件,开发过程就是不断优化和拆分界面组件...
    ITxiansheng阅读 1,010评论 1 2
  • 那天,我和李先生在电话里大吵,他给我讲了个故事,一场硝烟又被他化解了。 “从前,有个鸡窝,里面有两只鸡,这两只鸡总...
    黑莉与咖啡阅读 214评论 0 1
  • 文/红粉涟漪 01最甜蜜的时刻 小雪觉得每天生活在童话里,美好的不像话。原来真的有白马王子,他就在身边,并不是做梦...
    莉姐说财阅读 414评论 3 5
  • 一、代理模式 定义:给某个对象提供一个代理对象,并由代理对象控制对于原对象的访问,即客户不直接操控原对象,而是通过...
    年少懵懂丶流年梦阅读 759评论 0 2
  • 在观赏这件事情上玻璃两侧是对等的 代价是一张门票和一生的自由 不过一侧想看 一侧不想看 丑的总是垂涎美的
    张明天_1018阅读 498评论 0 1

友情链接更多精彩内容