1. 当渲染的只有一个目标元素的时候可以直接省去 return
function FormList({ color = 'blue', text = 'Confirm'}) {
return(
<button className = {`btn btn-${color}`}>
<em>{text}</em>
</button>
)
}
const FormList = ({ color = 'blue', text = 'Confirm'}) => (
<button className = {`btn btn-${color}`}>
<em>{text}</em>
</button>
)
2.reactDom.render 中是以 “,” 作为分割的, 原因就是 render 出来的是对象的集合, 但是,当组件用一个 div 包裹的时候,这时候 div 内部是不能有逗号的
ReactDOM.render(
<App/>,
document.getElementById('root')
)
例如:
ReactDOM.render(
<div>
<Header/>
<Routes history={browserHistory}/>
</div>,
document.getElementById('root')
);
3.ReactDom.render 不仅仅只能写在页尾,同时也可以写在函数体中
function tick() {
const element = (
<div>
<h1>Hello, world!</h1>
<h2>It is {new Date().toLocaleTimeString()}.</h2>
</div>
);
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 <h1>Hello, {this.props.name}</h1>;
}
}
5. 渲染一个组件
const element = <a/>; //React元素代表DOM标签
const element = <Welcome name="Sara" />; //React元素也可以代表用户自定义组件:
当 React 认为一个元素代表用户自定义组件时,它通过单个对象传递 JSX 属性到这个组件。我们叫这个对象为 “属性”。
我们在一个组件内部,再去渲染一个组件的话,举个例子,这段代码渲染 “Hello, Sara” 到页面上:
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="Sara" />;
ReactDOM.render(
element,
document.getElementById('root')
);
6. 一个经典例子, 简单但是可以悟出来很多
function formatDate(date) {
return date.toLocaleDateString();
}
function Comment(props) {
return (
<div className="Comment">
<div className="UserInfo">
<img className="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(
<Comment
date={comment.date}
text={comment.text}
author={comment.author} />,
document.getElementById('root')
);