react整理二阶段学习笔记

页面引入单个或者多个文件时，在影响方面是请求的次数影响最大

块级元素需要内部元素才能撑起高度，否则高度为0

字体大小不同 容易导致行高不同 从而导致版块之间有间隔缝隙

突然发现，我好像有一两个星期没有更新学习资料了

整理下这段时间学习的react的学习笔记

----------------------------------------

var React = require('react');
var ReactDOM = require('react-dom');
上下效果等同，两种写法
// import React from 'react';
// import ReactDOM from 'react-dom';

----------------------------------------

每个render函数里返回的html节点只能是一个，但可以用div将多个节点包含起来，如下：
            <div>
                <ComponentHeader/>
                <h2>zheshidierge</h2>
            </div>
                
-----------------------------------------

如果要将定义的组件供外部使用，必须在组件定义前添加 export default 如：
export default class Componentheader extends React.Component{.........}

-----------------------------------------

定义组件开发模式的话，就需要给一个入口，这个入口在主要组件中配置：
ReactDOM.render(<Index/>, document.getElementById('example'));
“Index”为组件集合，“example”为页面中标记的id，即将来需要替换的部位
没有入口，react就不会发生作用

-----------------------------------------

所有自定义的参数都必须使用{}，包括注释{/*......*/} 如下：
  render(){
    var name = '111';
    var boolean = false;
    return(
      <div>
          <h2>这里是这要内容</h2>
          <p>{name=='12' ? 'no---name' :'yes---name:'+name}</p>
          <p><input type='button' value={name} disabled={boolean} /></p>
      </div>

-----------------------------------------

react生命周期中的各种函数名称必须严格区分大小写，否则无法生效，
componentWillMount，componentDidMount等函数的定义类似与切面函数，如下：
            componentWillMount(){
            在组件加载前执行一下方法或者业务逻辑
              console.log('Componentbody - componentWillMount');
            }
            componentDidMount(){
            在组件加载完成执行一下方法或者业务逻辑
              console.log("Componentbody - componentDidmount");
            }
              render(){
                var name = '111';
                var boolean =

----------------------------------------

export default class ComponentBody extends React.Component{.....}，解释如下：

这里小组件的模式，export default代表可以提供给外部使用，
class ComponentBody 定义组件名称钱必须添加class，
extends React.Component 语法如此而已。

----------------------------------------

  setTimeout(
      ()=>{
        this.setState({username:'kai'});
      },4000 );
setTimeout，this.setState，类似与java里面的get/set方法，
this.setState是修改属性。
类似与这种属性方面的函数，必须注意大写，否则没有作用。

----------------------------------------

  constructor(){
        super();
        this.state = {username:'yang',age:30};
  }
  这个构造函数中，“this.state”为其定义函数属性，
  {username:'yang',age:30,...}，类似与json方法，可以定义多个属性

----------------------------------------

state属性特点：
当我们修改某个组件时，页面是从新刷新、从新请求，
而当我们只改变state里的属性时，页面类似与ajax请求，
只刷新某个部位，
即：state的作用域只属于当前类，不污染其他模块。

----------------------------------------

这里父组件向子组件传递参数
<ComponentBody username={'ying'} userid={117} age={11}/>
{this.props.userid}{this.props.username}{this.props.age}
state是组件自有属性，props是外来属性，
当需要外来传入属性时，直接在组件中username={'ying'} userid={117} age={11}直接写即可，
在模块中接收需要{this.props.age}即可，如下：
      <div>
          <h4> 这里是主要内容 </h4>
        <p>{this.state.username}==={this.props.userid}</p>
    </div>
{this.state.username}接收自有属性，
{this.props.userid}接收外来属性。

-----------------------------------------

import React from 'react';正确
import React from 'React';错误
这里一定要使用小写，因为会与别的文件重名，造成如下问题：
WARNING in ./~/.npminstall/rxjs/5.0.0-beta.6/rxjs/Notification.js
There is another module with an equal name when case is ignored.
This can lead to unexpected be......

-----------------------------------------

子组件传值，父组件随即改变属性值
1.子组件中，定义改变的属性位置
return(
      <div>
        <p>请输入：<input type="test" onChange={this.props.handleChildV} /></p>
      </div>    )
      handleChildV为定义时自定义的名称

2.父组件中
    在return中定义
    <BodyChild handleChildV = {this.handleChildV.bind(this)}/>
    BodyChild为组件名称
        将子组件中的值与父组件关联

3.    并在父组件中定义相关方法使子组件传来的值与属性值相关联
    handleChildV(event) {
        this.setState({
          age: event.target.value  将传来的值与属性值关联
        });

------------------------------------------

验证父组件传给子组件的值的方法：
在组件中
import PropTypes from 'prop-types';
然后在最后定义
ComponentBody.propTypes = {
  userid: PropTypes.number.isRequired    };
  注意：这里是React v15.5.0版本类型验证方法
  ComponentBody为验证时的组件名称
这样就是说父组件必须为子组件传值，并且为number类型
这里需要注意的是，没有传值时，程序只是警告，传的类型不对时，程序会报错

------------------------------------------

父组件未传值，然后需要有个默认值的甚至方法
在最开始定义
const defaultProps = {
  username : "这是默认值"    };
  这里json格式，可定义多个属性值
在最后定义
ComponentBody.defaultProps = defaultProps;
ComponentBody为默认值设置的组件名称

------------------------------------------

<BodyChild {...this.props} id={34} handleChildV = {this.handleChildV.bind(this)}/>
页面传参时，这里为父往子传时，
只需要定义{...this.props} 就可以将参数继续往‘下’传，
如果还有自定义的参数
id={34}在后面继续定义即可

------------------------------------------