本节包含:

  1. hello world
  2. jsx
  3. 元素渲染(render)
  4. 组件&Props

组件名称必须以大写字母开头。

  • React 会将以小写字母开头的组件视为原生 DOM 标签
    例如,<div /> 代表 HTML 的 div 标签,而 <Welcome /> 则代表一个组件,并且需在作用域内使用Welcome
  • react使用jsx语法,jsx语法使用小驼峰命名

react的执行顺序:

  ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
    );
  • 从ReactDOM开始;先执行括号内的<h1>;再执行render,render负责将元素渲染在网页上

jsx定义元素可以将多个元素放在同一个div下

  const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
 );

props与state

  • 和蠢太恩爱纠缠了一个小时之后,总算是搞明白了

    ReactDOM.render(
     <WebSite />,
     document.getElementById('example')
    );
  • state是组件私有的,在本组件内可以访问,需要访问特定元素时的语法this.state.元素名
    class WebSite extends React.Component {

     constructor() {
     super();
     this.state = {
       name: "菜鸟教程",
       site: "https://www.runoob.com"
      }
    }
    render() {
     return (
       <div>
         <Name na={this.state.name} />
         <Link site={this.state.site} />
       </div>
     );
    }
    }
  • props是被传递下来的元素,是被上一组件以参数的形式传递过来的元素
  • <Name na={this.state.name} />代码详解:Name调用Name这个组件;na代表Name组件中声明一个na元素;等号后面是希望传递过去的值,可以是以{}包裹的本组件元素,也可以是包含在""里的字符串或直接写数字

    class Name extends React.Component {
     render() {
       return (
         <h1>{this.props.na}</h1>
       );
      }
    }

ps:props有默认的只读属性


组件需要接受传参时只需要在括号内写props,不需要写props.name之类的具体元素名

function Welcome(props) {
 return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);
  • 执行顺序:ReactDOM -> element -> const element... -> Welcome组件 -> render() -> document.getEle...

组合组件

  • 可以创建一个可以多次渲染 Welcome 组件的 App 组件

    function Welcome(props) {
    return <h1>Hello, {props.name}</h1>;
    }
    function App() {
       return (
           <div>
               <Welcome name="Sara"/>
               <Welcome name="Cahal"/>
               <Welcome name="Edite"/>
           </div>
       );
    }
    ReactDOM.render(
       <App/>,
       document.getElementById('root')
       );
  • 执行顺序:ReactDOM -> App -> Welcome -> Welcome -> Welcome -> render() -> document.getEle...