Components and Props
Closed this issue · 0 comments
pluscai commented
4. Components and Props
Conceptually,
components
are like JavaScript functions. They accept arbitrary inputs (called “props
”) and returnReact elements
describing what should appear on the screen.
-
Component的两种写法:
// Function Components function Welcome(props) { return <h1>Hello, {props.name}</h1>; } // => 等价于下面写法 // Class Components class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; } }
-
渲染Component的机制
官网例子:
function Welcome(props) { return <h1>Hello, {props.name}</h1>; } const element = <Welcome name="Sara" />; ReactDOM.render( element, document.getElementById('root') );
分析component的渲染到页面上的过程:
-
we call
ReactDOM.render()
the<Welcome name="Sara" />
element. -
React calls the
Welcome
component with{name: 'Sara'}
as the props. -
Our
Welcome
component returns aHello, Sara
element as the result -
React DOM efficiently updates the DOM to match
Hello, Sara
.
-
-
Components可以组合使用
Components
可以组合使用,也可以将常用部分提取出来作为components
tips : Props are Read-Only