react学习(一)组件

react这个东西,说实话,我刚刚接触一个月不到。感觉这玩意很颠覆我以前的前端开发

比方说,可能,整个项目,并没有一个html文件

比方说,以前我们写前端代码,分的清清楚楚,html里面就是放dom,css里面放样式,js里面放逻辑处理

比方说...

手里头正好在写一个项目,也顺带着看着书,就稍微记一点自己的理解

组件

我觉得这个是react的核心了哇

以前也写组件,毕竟是加快开发的东西,就像雕版印刷最后发展到活字印刷的必然性。组件也是必然的。

可复用很重要,一个项目,甚至多个项目,肯定会有很类似的东西,他们往往只是某部分不同,差不多就这个意思,把不同的地方搞成个变量,恩,差不多就这样理解挺方便的

下面研究下react的组件

/**
 * @file
 * @author fengying
 */
import React, { PureComponent, PropTypes } from ‘react‘;
import styles from ‘./boxTitle.less‘;

export default class boxTitle extends PureComponent {
 // 定义参数的类型以及是否为必须的,如果这边不是必须就要在defaultProps里面
  static propTypes = {
    title: PropTypes.string,   icon: PropTypes.bool.isRequired,
  }
  // 定义非必要的参数的默认值
  static defaultProps = {
    title: ‘‘,
  }
  // 构造函数,定义默认的state
  constructor(props) {
    super(props);

    this.state = {
    };
  }

  // 在render()方法执行前执行,只执行一次
  componentWillMount() {
  }

  // 在render()方法执行后执行,只执行一次
  componentDidMount() {
  }

  // 当组件传入的 props 发生变化时调用,例如:父组件状态改变,给子组件传入了新的prop值。用于组件 props 变化后,更新state。
  componentWillReceiveProps(nextProps) {
    // this.setState({ });
  }

  // 接受需要更新的props和state,让开发者增加必要的条件判断,让其在需要时更新,不需要时不更新,当方法返回false时,组件不再向下执行生命周期方法
  shouldComponentUpdate(nextProps, nextState) {
  }

  // 重新渲染组件刷新前
  componentWillUpdate() {
  }

  // 重新渲染组件刷新后
  componentDidUpdate() {
  }

  // 组件销毁前(事件回收或者清除定时器等方法)
  componentWillUnmount() {
  }

  render() {
    const { title, icon } = this.props;
    return (
      <div className={styles.title}>
        {        icon ? <span className={styles.tip} /> : ‘‘     }
        {title}
      </div>
    );
  }
}

  这个是项目里一个小标题

基本上可以作为一个模板,当然有些方法没用到的,可以删了

总结

生命周期三个状态:

  • Mounting:已插入真实 DOM
  • Updating:正在被重新渲染
  • Unmounting:已移出真实 DOM

状态的处理函数:

  • componentWillMount()
  • componentDidMount()
  • componentWillUpdate(object nextProps, object nextState)
  • componentDidUpdate(object prevProps, object prevState)
  • componentWillUnmount()

特殊的处理函数:

  • componentWillReceiveProps(object nextProps):已加载组件收到新的参数时调用,DOM不会二次渲染
  • shouldComponentUpdate(object nextProps, object nextState):组件判断是否重新渲染时调用

render里面return的html,用{}包围起来写js代码

state改变,页面会重新渲染

时间: 2024-11-05 16:10:49

react学习(一)组件的相关文章

React学习笔记 - 组件&amp;Props

React Learn Note 4 React学习笔记(四) 标签(空格分隔): React JavaScript 三.组件&Props 组件可以将UI切分成一些独立的.可复用的部件,这样你就只需专注于构建每一个单独的部件. 组件接收props,返回react元素. 1. 函数定义\类定义组件 最简单组件方式 - 函数定义组件: // 函数定义组件 function Welcome(props) { return <h1>Hello, {props.name}!</h1>

React学习——ListView组件

(草稿) 先把代码放上来,再补充说明 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>React ListView</title> 5 <!-- 6 做一个列表控件,列表元素的模板可以设置,模仿ItemTemplate 7 --> 8 <script src="../build/react-with-addons.js" type="text/javascr

react学习笔记之组件生命周期

React 中的组件有三种状态: Mounted:已插入真实 DOM Updating:正在被重新渲染 Unmounted:已移出真实 DOM 它为每个状态都提供了两种处理函数: will:函数在进入状态之前调用, did: 函数在进入状态之后调用,三种状态共计五种处理函数. 所以,除了组件初始化时调用的getDefaultProps,getInitialState方法外,每个组件还有 componentWillMount,componentDidMount,componentWillUpdat

React学习系列

React学习系列 系列学习react 翻译地址 https://scotch.io/tutorials/learning-react-getting-started-and-concepts 我是初学者,英语也不是很好,不过一直强迫自己看英文文档. 这是理解翻译,翻译的不好,请见谅!()中的是我翻译过程中理解,参考下,有什么说的不对的欢迎指点下! 第一节:如何开始react和了解react的概念 1.React是什么 react是Facebook 开发出来用于促进UI交互,创建带有状态的,可复

react学习笔记(一)

在开篇之前,先来说说选择react的初衷. 一个初学者,在开始选择深入了解一个框架之前,我查阅了一些资料,做出了对三大框架的一些基本分析. 1.数据流.Vue和Angular都是支持双向数据绑定,也就是在界面的操作能实时反映到数据,数据的变更能实时显示在界面上.Vue默认为单向数据绑定.React支持单向数据绑定,也就是说给定一个原始的页面,之后添加一些组件化操作,得到一个变化后的页面. 2.组件化.Vue和React都支持组件化.组件,即对一些数据和方法的封装,它可以用来构建用户页面,并通过任

React 学习路线

以下所谈及的,就是为你定制的 React 学习路线. 为了能稳固基础,我们一定要逐步地来进行学习. 倘若你正在建造一间房子,那么为了能快点完成,你是否会跳过建造过程中的部分步骤?如在具体建设前先铺设好部分石头?或直接在一块裸露的土地上先建立起墙面? 又假如你是在堆砌一个结婚蛋糕:能因为上半部分装饰起来更有趣,而直接忽略了下半部分? 不行吗? 当然不行.众所周知,这些做法只会导致失败. 因此,不要想着通过接触 React 来将 ES6 + Webpack + Babel + React + Rou

React学习笔记-1-什么是react,react环境搭建以及第一个react实例

什么是react?react的官方网站:https://facebook.github.io/react/下图这个就是就是react的标志,非常巧合的是他和我们的github的编辑器Atom非常相似.react是Facebook官方推出的一个javascript的库,现在已经有了非常多的库和框架Facebook为什么还要开发一款新的框架呢?原因就是 Facebook遇到了一些新的问题.Facebook需要解决的问题是构建数据不断变化的大型应用.大型应用是什么意思?数据不断变化带来什么问题呢? 

react学习小结(生命周期- 实例化时期 - 存在期- 销毁时期)

react学习小结 本文是我学习react的阶段性小结,如果看官你是react资深玩家,那么还请就此打住移步他处,如果你想给一些建议和指导,那么还请轻拍~ 目前团队内对react的使用非常普遍,之前对react使用不多,正好我目前在做的项目也在使用react+redux,借着这个机会系统的学习下react+redux. react是什么 react是一个JavaScript类库,通过react,我们可以构建可组合的UI,也就是说,我们可以通过重用组件来组合出我们的UI.可以说react的核心便是

React学习系列一

系列学习react 翻译地址 https://scotch.io/tutorials/learning-react-getting-started-and-concepts 我是初学者,英语也不是很好,不过一直强迫自己看英文文档. 这是理解翻译,翻译的不好,请见谅!()中的是我翻译过程中理解,参考下,有什么说的不对的欢迎指点下! 第一节:如何开始react和了解react的概念 1.React是什么 react是Facebook 开发出来用于促进UI交互,创建带有状态的,可复用的UI组建的UI库

2019年React学习路线图

作者|javinpaul 译者|无明 之前我们已经介绍了 2019 年 Vue 学习路线图,而 React 作为当前应用最广泛的前端框架,在 Facebook 的支持下,近年来实现了飞越式的发展,我们将在下文中介绍 2019 年 React 学习路线图,希望给想学 React 的开发者一些借鉴. 下图是2018 年的 React 路线图,它非常全面,2018 年剩下的时间可能不够你学会所有这些,但不要担心,所有的技术在 2019 年仍然有效.   图片来源: https://github.com