React入门基础

女爷i 2022-07-13 20:57 150阅读 0赞

React 可以在浏览器运行，也可以在服务器运行。

一、HTML 模板

<!DOCTYPE html>
    <html>
      <head>
        <script src="../build/react.js"> </script> //核心库
        <script src="../build/react-dom.js"></script> //与DOM相关的功能
        <script src="../build/browser.min.js"></script> //将JSX转化为javascript
      </head>
      <body>
        <div id="example"></div>
        <script type="text/babel"> // ** Our code goes here! ** </script>
      </body>
    </html>

script标签的type属性为text/babel,是因为React独有JSX语法，跟JavaScript不兼容。凡是使用JSX的地方，都要加上type=”text/babel”

二、ReactDOM.render()

ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。

//将一个H1标题，插入到example节点

ReactDOM.render(
       <h1> Hello world </h1>
       document.getElementById('example')
    );

三、JSX 语法

可以直接将HTML语言写在JavaScript中，不加任何引号，允许HTML和JavaScript混写。

var names=['Alice','Emily','Kate'];
    ReactDOM.render(
       <div>
       {
         names.map(function (name){ 
          return <div> Hello,{name}!   </div>
      })     
     }
     </div>,
     document.getElementById('example')
    );

JSX 的基本语法规则：遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 \{ 开头），就用 JavaScript 规则解析。

JSX允许直接在模板插入JavaScript变量，如果变量是一个数组，则会展开这个数组所有成员。

var arr=[
      <h1> Hello world!</h1>,
      <h2>React is awesome</h2>, 
    ];
    ReactDOM.render(
       <div> {arr} </div>,
       document.getElementById('example')
    );

四、组件

React 允许将代码封装成组件，然后在网页中插入组件。所有组件都有自己的render方法，用于输出组件。

var HelloMessage=React.createClass({
       render:function (){ 
         return <h1>Hello {
       this.props.name}</h1>;
       }
    })
    ReactDOM.render(
       <HelloMessage name="John" />,
       document.getElementById('example')
    );

组件中可以加入属性，比如HelloMessage组件中加入了一个name属性。

组件类只能包含一个顶层标签，包含多个顶层标签会报错

var HelloMessage=React.createClass({
       render:function(){ 
        return <h1>
         Hello {
       this.props.name}
         </h1><p>
           some text
         </p>;
      }
    });

包含了两个顶层的标签h1和p，所以会报错

五、this.props.children

this.props对象的属性与组件的属性一一对应，this.props.children属性，表示组件的所有子节点

NoteList组件有两个span子节点，都可以通过this.props.children读取

this.props.children 的值有三种可能：如果当前组件没有子节点，它就是 undefined ;如果有一个子节点，数据类型是 object ；如果有多个子节点，数据类型就是 array。

可以使用React.Children来处理this.props.children,用React.Children.map来遍历子节点。

六、PropTypes

组件属性可以接受任意值，字符串，对象，函数等等。组件类的PropTypes属性，可以用来验证组件实例属性是否符合要求。

var MyTitle=React.createClass({
      propType:{
        title:React.PropTypes.string.isRequired,
     },
     render:function(){ 
        return <h1> {
       this.props.title} </h1>;
      }
    });

Mytitle组件有一个title属性。PropTypes 告诉 React，这个 title 属性是必须的，而且它的值必须是字符串。

var dada=123; //tltle属性设置成一个数值，报错
    ReactDOM.render(
      <MyTitle tilte={
       data} />,
      document.body
    );

getDefaultProps方法可以用来设置组件属性的默认值

七、获取真实的DOM节点

组件并不是真实的DOM节点，而是内存中的一种数据结构，叫做虚拟DOM。只有当它插入到文档以后，才会变成真实的DOM.所有DOM的变动，都现在虚拟DOM上发生，然后再将实际发生变动的部分，反应在真实的DOM上，这样的算法叫做DOM diff，可以提高网页的性能表现。

组件 MyComponent 的子节点有一个文本输入框，用于获取用户的输入。这时就必须获取真实的 DOM 节点，虚拟 DOM 是拿不到用户输入的。为了做到这一点，文本输入框必须有一个 ref 属性，然后 this.refs.\[refName\] 就会返回这个真实的 DOM 节点。

八、this.state

组件是一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染UI

这是一个LikeButton组件，它的getInitialState用于定义初始状态，也就是一个对象，这个对象可以通过this.state属性读取。当用户点击组件，导致状态变化，this.setState方法就修改状态值，每次修改后，自动调用this.render方法，再次渲染组件。

this.props 和 this.state 都用于描述组件的特性，this.props 表示那些一旦定义，就不再改变的特性，而 this.state 是会随着用户互动而产生变化的特性。

九、表单

定义一个onChange事件的回到函数，通过event.target.value读取用户输入的值。