1. 当渲染的只有一个目标元素的时候可以直接省去 return
function FormList({ color = 'blue', text = 'Confirm'}) {
return(
)
}
const FormList = ({ color = 'blue', text = 'Confirm'}) => (
)
2.reactDom.render 中是以 “,” 作为分割的, 原因就是 render 出来的是对象的集合, 但是,当组件用一个 div 包裹的时候,这时候 div 内部是不能有逗号的
ReactDOM.render(
,
document.getElementById('root')
)
例如:
ReactDOM.render(
<div>
<Header/>
<Routes history={browserHistory}/>
div>,
document.getElementById('root')
);
3.ReactDom.render 不仅仅只能写在页尾,同时也可以写在函数体中
function tick() {
const element = (
Hello, world!
It is {new Date().toLocaleTimeString()}.
);
ReactDOM.render(
element,
document.getElementById('root')
);
}
setInterval(tick, 1000);
它利用 setInterval() 定时器的回调每一秒都会调用一次 ReactDOM.render() 来更新 DOM。
在实际使用的时候,大多数 React 应用只调用一次 ReactDOM.render() 一次。下一章节我们会学习这些代码如何被包裹在有状态的组件之中。
4. 一个基本的 react 类组件
class Welcome extends React.Component {
render() {
return Hello, {this.props.name}
;
}
}
5. 渲染一个组件
const element = <a/>; //React元素代表DOM标签
const element = "Sara" />; //React元素也可以代表用户自定义组件:
当 React 认为一个元素代表用户自定义组件时,它通过单个对象传递 JSX 属性到这个组件。我们叫这个对象为 “属性”。
我们在一个组件内部,再去渲染一个组件的话,举个例子,这段代码渲染 “Hello, Sara” 到页面上:
function Welcome(props) {
return Hello, {props.name}
;
}
const element = "Sara" />;
ReactDOM.render(
element,
document.getElementById('root')
);
6. 一个经典例子, 简单但是可以悟出来很多
function formatDate(date) {
return date.toLocaleDateString();
}
function Comment(props) {
return (
<div className="Comment">
<div className="UserInfo">
"Avatar"
src={props.author.avatarUrl}
alt={props.author.name} />
<div className="UserInfo-name">
{props.author.name}
div>
div>
<div className="Comment-text">
{props.text}
div>
<div className="Comment-date">
{formatDate(props.date)}
div>
div>
);
}
const comment = {
date: new Date(),
text: 'I hope you enjoy learning React!',
author: {
name: 'Hello Kitty',
avatarUrl: 'http://placekitten.com/g/64/64'
}
};
ReactDOM.render(
date={comment.date}
text={comment.text}
author={comment.author} />,
document.getElementById('root')
);