react 组件的创建 及 传值

介绍

• react中定义组件两种形态，函数式组件 | 类组件
• 组件允许你将 UI 拆分为独立可复用的代码片段，并对每个片段进行独立构思
• 组件，从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素
• 官方文档说明

1. 类组件

格式：

class 组件名  extends  React.Component {
     render(){ //render是必不可少的钩子函数
         return jsx表达式
   }
}

示例：

<script type="text/babel">
        class App extends React.Component{
            render(){ //render必须要写的，返回一段jsx代码
                return (
                    <div>
                    	<li>你好，这里是类组件</li>
                    	<li>这里是接收到的：{this.props.id}</li>
                    </div>
                )
            }
        }
    ReactDOM.render(<App id={123}/>,document.getElementById("app"))
</script>

结果：

2. 函数式组件

格式：

const 组件名(首字母大写)=（props）=>{
	return jsx表达式             
}

示例：

    <script type="text/babel">
    const App = props =>{
        return(
            <div>
                <li>你好，这里函数式组件</li>
                <li>这里是接收的参数：{props.id}</li>
            </div>
            )
        }
        ReactDOM.render(<App id={123}/>,document.getElementById("app"))
    </script>

结果：