React入门基础

React基础教程

最新推荐文章于 2024-12-10 22:12:02 发布

原创最新推荐文章于 2024-12-10 22:12:02 发布 · 439 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react

React 专栏收录该内容

2 篇文章

订阅专栏

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属性，表示组件的所有子节点

var NotesList=React.createClass({
  render:function (){
    return (
    <ol>
     {
      React.Children.map(this.props.children,function(child){
    return <li> {child} </li>;
  })
  }
  </ol>
  );
 }
});
ReactDOM.render(
   <NotesList>
     <span>hello</span>
     <span>wprld</span>
     </NoteList>,
   document.body
);

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方法可以用来设置组件属性的默认值

var MyTitle=React.createClass({
  getDefaultProps:function(){
   return {
    title:'Hello World'
  };  
},
 render:function(){
   return <h1> {this.props.title} </h1>;
}
});
ReactDOM.render(
  <MyTitle />,
  documnet.body
);

七、获取真实的DOM节点

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

var MyComponent = React.createClass({
  handleClick: function() {
    this.refs.myTextInput.focus();
  },
  render: function() {
    return (
      <div>
        <input type="text" ref="myTextInput" />
        <input type="button" value="Focus the text input" onClick={this.handleClick} />
      </div>
    );
  }
});

ReactDOM.render(
  <MyComponent />,
  document.getElementById('example')
);

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

八、this.state

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

var LikeButton=React.createClass({
   getInitialState:function(){
    return {liked:false};
  },
  handleClick:function(event){
   this.setState({liked:!this.state.liked});
    },
    render:function(){
    var text=this.state.liked?'liked':'haven\'t liked';
    return (
     <p onClick={this.handleClick}>
        You {text} this.Click to toggle.
      </p>
   );
  }
});
ReactDOM.render(
  <LikeButton />,
  document.getElementById('example')
);

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

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

九、表单

var Input=React.createClass({
  getInitialState:function(){
     return {value:'Hello'};  
   },
   handleChange:function(event){
      this.setState({value:event.target.value});
   },
   render:function(){
    var value=this.stste.value;
    return(
      <div>
      <input type="text" value={value} onChange={this.handleChange} />
      <p>{value}</p>
    </div>
  );
  }
})

ReactDOM.render(<Input />,document.body);