React组件化编程

1、组件编写方式的注意事项：

• 组件名首字母必须大写；
• 虚拟DOM必须只有一个根元素；
• 虚拟DOM必须有结束标签。

2、两种组件编写方式

• 简单组件：使用工厂函数，不涉及state值的渲染

  <script type="text/babel">
      function Simple(){
        return <h1>这是工厂函数组件</h1>
      }
      ReactDOM.render(<Simple />,document.getElementById("root")); //注意
  </script>

• 复杂组件：使用ES6中的class类

• <script type="text/babel">
      class Mycomponent extends React.Component{
        render(){   //其中render是react的一个关键字
          return (
            <h1>这是一个复杂组件</h1>
          );
        }
      }
      ReactDOM.render(<Mycomponent />,document.getElementById("root"));
  </script>

3、任务：使用复杂组件实现列表功能

<script type="text/babel">
    //3、state相当于VUE中的data
    // 做一个遍历列表任务
    class MyComponent extends React.Component{
      constructor(props){
        super(props);
        this.state = {
          msg:[
            '赵云',
            '吉吉国王',
            '韩信',
            '露娜',
          ],
        }
      }
      render(){
        //取出state中的值
        var {msg} = this.state;
        return (
          <div>
            <ul>
              {
                msg && msg.map((item,index)=>{
                  return <li key={index}>{item}</li>
                })
              }
            </ul>
          </div>
        )
      }
    }
    ReactDOM.render(<MyComponent />,document.getElementById("root"));
</script>