前端框架（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有三种用法：至少精通一种用法（最科学的）

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.组件之间推荐组合，而不是继承。

标签：ant,定义,渲染,dva,用法,react,state,props,组件
来源： https://blog.csdn.net/zhongzk69/article/details/112458944