初识React-Components

Component and Props

component把整个应用分割成独立的、可重复使用的部分；

Component有两种方式：函数式和类式

最简单的方式是函数式（函数名首字母必须大写）
创建 Comment 组件，它将依赖于从父级传来的数据。从父级传来的数据在子组件里作为 '属性' 可供使用。

function Formatter(props) {
        return 
{props.firstName +' '+props.lastName}
；
    }
//这是一个有效的React 组件，因为它接受了一个props(代表properties)数据对象并且返回了一个React 组件。因为它与Javascript函数，所有我们把这类组件称之为’函数式组件‘

es6 类的方式定义组件

class Welcome extends React.Component {
  render() {
    return 
Hello, {this.props.name}
;
  }
}

渲染组件

component既可以是DOM标签也可以是使自定义的标签（首字母必须大写）；

组合组件->一个组件涉及其他的组件

function App() {
        return (

            
            
            
            
        
)
    }

    ReactDOM.render(,document.getElementById('b_com'));
//使用App组件渲染多次Welcome组件

拆分组件

通常在一个应用程序中只有一个顶层的组件；如果想整和一个项目，应该从最小的组件开始着手；

首先考虑一个评论组件(Comment Component)

1.原始代码：

function formatDate(date) {
        return date.toLocaleDateString();
    }
    function Comment(props) {
        return (
          

              

                  
                  

                      {props.author.name}
                  
              
              

                  {props.text}
              
              

                  {formatDate(props.date)}
              
          
        );
    }

    const com_ele = {
        date: new Date(),
        text: 'I hope you enjoy learning React!',
        author: {
            name: 'Hello Kitty',
            avatarUrl: './img/0.jpg'
        }
    }
    ReactDOM.render(,document.getElementById('com'));

//首先拆分头像
function Avatar(props) {
        return ();
    }
//拆分用户信息
function Comment(props) {
        return (
                

                    
                    

                        {props.text}
                    
                    

                        {formatDate(props.date)}
                    
                
        );
    }
function UserInfo(props) {
        return (
                

                    
                    

                        {props.user.name}
                    
                
        )
    }
    function Avatar(props) {
        return ();
    }

按照官网例子写的

只读props；props 是不可变的：它们从父级传来并被父级“拥有”。

如果我们从服务端获取数据，我们将一处数据的prop，用获取数据的url替换；

State和它的生命周期

按照上一个章节，时钟的组件，应该是时钟组件自己一直在更新，而不是通过定时进行更新；为了实现自我更新，这次我们使用他里面的‘state ’
前面有提到定义组件有两种方式，函数式和类。把组件定义成类有些特殊的属性。state就是她特殊的属性，所以接下来我们要把函数式转换成类

1.定义ES6类，继承React.Component;
2.添加一个空的render();
3.把原来函数体里面的内容，复制到render()函数里面；把里面的this.props.date用this.state.date替换掉；
4.在render()里，用this.props替换props；
5.删除空的函数；

class Clock extends React.Component {
        constructor (props){//构造函数初始化自身的属性
         super(props);//子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。
         this.state = {date:new Date()};
        }
        render() {
            return (
                    

                        
Hello, world!学习state
                        
It is {this.state.date.toLocaleTimeString()}.
                    
            )
        }
    }

如何让时钟一直动态更新
1.在类里面新增生命周期函数
应用程序中有很多的组件，当他们被销毁的时候，释放的资源是很重要的
在时钟第一次渲染的时候，我们就像设置一个定时，这在react中叫做‘mounting；当时钟组件被移除的时候，我们需要清空这个定时，这个在react中叫做‘unmounting’，这两个过程就形成了生命周期

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

        componentDidMount(){//3.dom插入时钟输出时，React会调用此函数，然后调用一个定时，每秒更新一次，
            this.timerID = setInterval(()=>this.trick(),1000)
        }

        componentWillUnmount(){
            clearInterval(this.timerID);
        }

        trick() {
            this.setState({//4.setState每秒更新视图
                date: new Date()
            });
        }

        render() {//2.Clock执行render时，会把dom元素渲染出来
            return (
                    

                        
Hello, world!学习state
                        
It is {this.state.date.toLocaleTimeString()}.
                    
            )
        }
    }

    ReactDOM.render(,document.getElementById('clock'));//1.当Clock通过React.render()时，Clock组件会执行它的构造函数，进而会初始化this.state;

state不直接更新视图
重新渲染使用setState，this.state只在构造函数初始化一次
state更新可能是异步
react可能批量处理多个setState();来更新某一个状态
因为 this.state和this.props可能是异步更新，所以不应该使用它们的值来计算下一个状态
eg:this.setState({ counter: this.state.counter + this.props.increment, });
修改上一个错误代码。利用setState()接受一个函数作为参数，而不是对象；该函数的第一个参数是以前state的值，在更新时使用的props数据作为第二个参数
eg:this.setState((prevState, props) => ({ counter: prevState.counter + props.increment }));