React学习第二篇——组件

非自定义组件

1、我们可以使用函数定义了一个组件：

function HelloMessage(props) {
    return <h1>Hello World!</h1>;
}

2、你也可以使用 ES6 class 来定义一个组件:

class Welcome extends React.Component {
  render() {
    return <h1>Hello World!</h1>;
  }
}

自定义组件

const element = **<HelloMessage />** 

注意**
自定义组件作为标签引用时候首字母都是大写的

组件传值

对比记忆：在vue里面父组件给子组件传值也是用props传值。

//子组件
function HelloMessage(props) {
    return <h1>Hello {props.name}!</h1>;
}
 //定义了元素
const element = <HelloMessage name="Runoob"/>;
 //渲染的页面
ReactDOM.render(
//将React元素渲染到DOM节点中，也可以直接写<HelloMessage name="Runoob"/>进来
    element,
    document.getElementById('example')
);

复合组件

function Name(props) {
    return <h1>网站名称：{props.name}</h1>;
}
function Url(props) {
    return <h1>网站地址：{props.url}</h1>;
}

function App() {
    return (
    <div>
        <Name name="复合组件/>
        <Url url="http://www.runoob.com" />
    </div>
    );
}
 
ReactDOM.render(
     <App />,
    document.getElementById('example')
);

总结

主要是初次学习，对着文档来学的，感觉理解起来很简单，但之后肯定是要再跟视频项目实战的，感觉有些时候老师总结的会好一些，现在已经上班实习了，领导提了一嘴需要React，就要开始学了，看视频目标太大了，但是觉得看文档知识不够全面啊。唉~
组件肯定不会只有这么多东西的，后面继续学。！！加油铁子