React中创建组件的两种方式

方法一

1 组件以函数形式创建
2 function Hello(){
3 在一个组件中一定要return东西，如果不返回东西要return null,不能不写，会报错。
4     return null
5 }
6 ReactDOM.render(<div>
7     ppps
8 <Hello></Hello>
9 </div>,document.getElementById('app'))

　　组件传值

 1 组件中传递数据（组件中传递的参数props都是只读的，不能重新负值。vue也是）
 2 props 形参可以改，不过写props更有语义
 3 function Hello(props){
 4     return <div>{props.name}</div>
 5 }
 6 const  kakaxi{
 7     name: '旗木卡卡西'
 8     age: '18',
 9     can: '千鸟'
10 ReactDOM.render(<div>
11     ppps
12 <Hello name={kakaxi.name} age={kakaxi.age} can={kakaxi.can}></Hello>
13 </div>,document.getElementById('app'))

　　利用展开运算符传递
　　{...kakaxi}

　　将组件抽离出去

 1 父组件
 2 import Hello from './component/Hello.jsx'
 3 ReactDOM.render(
 4     <div>
 5     123
 6     <Hello {...kakaxi}></Hello>
 7     </div>
 8 )
 9 
10 
11 
12 
13 
14 Hello.jsx   组件
15 import React from 'react'
16 //(1)创建即导出
17 export default function Hello(props){
18     
19     return <div>Hello的单独组件 </div>
20 }
21 
22 //（2）先写函数再暴露
23     //export default Hello
24 
25