前端框架(react+umi+dva+ant design pro )攻克: 二、react(一)

一、react组件:

1.组件名称必须大写字母开头。

2.组件的定义内容:

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  // 挂载渲染时 ,即组件第一次渲染到dom时 
  componentDidMount() {  }
  // dom 中删除此组件时,即卸载
  componentWillUnmount() {  }
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

 

二、props和state

1.props的只读性理解:

2.组件的state理解:

   (1)state与props类似,但state是私有的,完全控控于当前组件。

    (2)构造函数是唯一可以给this.state赋值的地方。

     (3)组件的state传给子组件,通过子组件的props来接收。

三、组件的事件:

    1.事件必须小驼峰命名法

    2. 传入的是一个函数作为事件处理函数,而不是一个字符串。

    3. class方法默认不会绑定this,所以绑定this有三种用法:至少精通一种用法(最科学的)

前端框架(react+umi+dva+ant design pro )攻克: 二、react(一)

4、条件渲染:

  (1)if 用法,以及用变量来完成不同的渲染组件的技巧

    (2)  运算符&&用法

        是因为在 JavaScript 中,true && expression 总是会返回 expression, 而 false && expression 总是会返回 false

  (3)三目运算符:condition ? true : false。技巧用法。

   (4)阻止组件渲染:

       在极少数情况下,你可能希望能隐藏组件,即使它已经被其他组件渲染。若要完成此操作,你可以让 render 方法直接返回 null,而不进行任何渲染。

5.列表&Key

   map用法实现组件的重复渲染,注意key的定义,显式定义或者缺省有索引。

6.表单

    学会受控组件的定义(即value的定义法),表单的工作方式与其他的dom元素不同,它有自己的内部state。

     文件控件是一个特殊的非受控组件。

另一个方案:非受控组件来实现。

7.组件之间推荐组合,而不是继承。

 

 

 

 

 

 

 

上一篇:umi + ts + dva中 model的动态使用


下一篇:使用dva改造React旧项目的数据流方案