state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。
demo1
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>菜鸟教程 React 实例</title> <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script> <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script> <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script> </head> <body> <div id="example"></div> <div id = "helloReactZzw"></div> <script type="text/babel"> function HelloMessage(props) { return <h1>Hello {props.name}!</h1>; } class HelloMessageZzw extends React.Component { render() { return ( <h1>Hello, {this.props.myname}</h1> ); } } const element = <HelloMessage name="Runoob"/>; const elementZzw = <HelloMessageZzw myname = "zzwLearningReact"/>; //const elementZzw1 = <HelloMessageZzw myname = "zzwLearningReact"/> + <HelloMessage name="Runoob"/>; //留一下一个问题下次思考 ReactDOM.render( elementZzw, document.getElementById('example') ); </script> </body> </html>
demo2
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>菜鸟教程 React 实例</title> <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script> <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script> <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script> </head> <body> <div id="example"></div> <div id = "helloZzw"/> <script type="text/babel"> class HelloMessage extends React.Component { render() { return ( <h1>Hello, {this.props.myname}</h1> ); } } HelloMessage.defaultProps = { name: 'Runoob', myname:'zzw', }; const element = <HelloMessage/>; ReactDOM.render( element, document.getElementById('helloZzw') ); </script> </body> </html>
demo3
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>菜鸟教程 React 实例</title> <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script> <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script> <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> class WebSite extends React.Component { constructor() { super(); this.state = { name: "菜鸟教程", site: "http://www.runoob.com" } } render() { return ( <div> <Name name={this.state.name} /> <Link site={this.state.site} /> </div> ); } } class Zzw extends React.Component {//react声明组件时，第一个字母必须大写 constructor() { super(); this.state = { name: "我的博客", site: "https://www.cnblogs.com/zzzzw" } } render() { return ( <div> <Zzw1 name={this.state.name} /> <Zzw2 site={this.state.site} /> </div> ); } } class Name extends React.Component { render() { return ( <h1>{this.props.name}</h1> ); } } class Link extends React.Component { render() { return ( <a href={this.props.site}> {this.props.site} </a> ); } } class Zzw1 extends React.Component { render() { return ( <h1>{this.props.name}</h1> ); } } class Zzw2 extends React.Component { render() { return ( <a href={this.props.site}> {this.props.site} </a> ); } } ReactDOM.render( <Zzw />, document.getElementById('example') ); </script> </body> </html>
