React入门基础

来源：互联网发布：c语言函数或编辑：程序博客网时间：2024/05/22 19:26

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);

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

读书笔记，参考阮一峰的教程

0 0