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}在后面继续定义即可

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