React基础：列表渲染、生命周期

列表渲染

数组中元素可以直接渲染

 class Fun extends React.Component {
       constructor(props) {
         super(props);
         this.state = {};
       }

       render() {
         return (
           <div>
             <h1>{this.props.params}</h1>
           </div>
         );
       }
     }
     const arr = [1, "str", true, [5, 6]];
     ReactDOM.render(<Fun params={arr} />, document.getElementById("example"));

从图片中可以看出列表中的元素都被渲染到了页面
注：
1、列表中元素可以直接渲染到页面，布尔值不会渲染到页面。如果列表中存在对象时，会报错
2、列表中可以存在布尔值，对象等元素，但是不能直接渲染整个数组，要指明某一个元素

  class Fun extends React.Component {
    constructor(props) {
      super(props);
      this.state = {};
    }

    render() {
      return (
        <div>
          <h1>{this.props.params[4].age}</h1>
        </div>
      );
    }
  }
  const arr = [1, "str", true, [5, 6],{age:15}];

对于图片中的渲染结果对我们根本没用，我们的目标是每一个h1里都有一个元素而不是所有元素都在一个h1标签中。这时对数组进行改造，数组元素为jsx对象

   class Fun extends React.Component {
        constructor(props) {
          super(props);
          this.state = {};
        }

        render() {
          return (
            <div>
              <h1>{this.props.params}</h1>
            </div>
          );
        }
      }
      const arr = [<h1>1</h1>, <h1>"str"</h1>, <h1>true</h1>, <h1>[5, 6]</h1>];
      ReactDOM.render(<Fun params={arr} />, document.getElementById("example"));

这样是渲染出来了，但没有任何意义，不可能渲染元素时还要手动加上标签

渲染数据
正确的方式是通过数组的map函数来渲染每一个数据

//函数组件式
function Fun(props) {
     let list = props.params;
     let persons = list.map((item, index) => {
       return (
         <p key={index}>
           姓名：{item.name}，性别：{item.sex}
         </p>
       );
     });

     return <div>{persons}</div>;
   }
   const arr = [
     {
       name: "李雷",
       sex: "男"
     },
     {
       name: "韩梅梅",
       sex: "女"
     }
   ];
   ReactDOM.render(<Fun params={arr} />, document.getElementById("example"));

//类组件式
class Fun extends React.Component {
     constructor(props) {
       super(props);
       this.state = {};
     }
     render() {
       let arr = this.props.params;
       let person = arr.map((item, i) => {
         return (
           <p key={i}>
             姓名：{item.name}，性别：{item.sex}
           </p>
         );
       });
       return <div>{person}</div>;
     }
   }
   const arr = [
     {
       name: "李雷",
       sex: "男"
     },
     {
       name: "韩梅梅",
       sex: "女"
     }
   ];
   ReactDOM.render(<Fun params={arr} />, document.getElementById("example"));

//深入
function Person(props) {
      return (
        <p>
          姓名：{props.item.name}，性别：{props.item.sex}
        </p>
      );
    }

    class Fun extends React.Component {
      constructor(props) {
        super(props);
        this.state = {};
      }
      render() {
        let arr = this.props.params;
        let person = arr.map((item, i) => {
          return <Person item={item} key={i} />;
        });
        return <div>{person}</div>;
      }
    }
    const arr = [
      {
        name: "李雷",
        sex: "男"
      },
      {
        name: "韩梅梅",
        sex: "女"
      }
    ];
    ReactDOM.render(<Fun params={arr} />, document.getElementById("example"));

注：对于第三种方式，key值要绑定在组件上，否则会报warning

生命周期

生命周期的状态：

• Mounting：将组件插入到DOM对象中
• Updating：将数据更新到DOM中
• Unmounting：将组件移除DOM

生命周期的方法（钩子函数）有：

• componentWillMount ：组件将要渲染
• componentDidMount :组件渲染完成
• componentWillReceiveProps ：组将将要接收props数据
• shouldComponentUpdate： 返回一个布尔值。在组件接收到新的props或者state时被调用，更新组件的数据，可以在你确认不需要更新组件时使用。
• componentWillUpdate：在组件接收到新的props或者state时将要更新
• componentDidUpdate： 在组件完成更新后立即调用。在初始化时不会被调用。
• componentWillUnmount：在组件从 DOM 中移除之前立刻被调用。

生命周期函数的使用场景

• componentWillMount() 组件第一次加载前的方法，一般用于组件内部的初始化
• componentDidMount()组件加载完毕后， 可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作，除此之外还可以加载一些其它的JavaScript框架的组件
• componentWillUpdate(object nextProps,object nextState)组件即将开始更新的方法，可以针对某个状态或者props发生变化后去执行某些操作
• componentDidUpdate，一般用来做状态对比进行debug
• componentWillUnmount，一般就是清除监听，比如清除定时器
• shouldComponentUpdate(object nextProps,nextState)一般用来控制这个组件是否进行更新，比如在有state改变了之后你不想让组件渲染，可以在方法里return false
• 用来接收新的props后，去更新组件状态。比如子组件的Ajax请求中需要一个参数是父组件中的props，这时候如果父组件的props发生了变化，你想要子组件也实时更新，这时就可以在方法里利用nextProps去发生Ajax请求，更新数据

比较常用的是：componentDidMount、componentWillReceiveProps、componentWillUnmount