2017.11.30 React基础语法之一组件

1.推荐一个React学习中文网站：http://www.css88.com/react/

 

2.使用jsx来将代码封装成React组件，而后像插入普通 HTML 标签同样，在其余地方插入这个组件。使用React.createClass用于生成一个组件

var MyComponent=React.createClass({
  render: function() {
   return <h1>Hello world!</h1>;
 }
});
ReactDOM.render(
 <MyComponent />,
 document.getElementById('example')
);

上面代码中，变量 MyComponent就是一个组件类。模板插入 <MyComponent /> 时，会自动生成 MyComponent 的一个实例（下文的"组件"都指组件类的实例）。全部组件类都必须有本身的 render 方法，用于输出组件。

 

3.React 能够渲染 HTML 标签 (strings) 或 React 组件 (classes)。

注意：在react中一般约定组件类的第一个字母必须大写，html标签都是小写

//要渲染 HTML 标签，只需在 JSX 里使用小写字母开头的标签名。
var myDivElement = <div className="foo" />;
React.render(myDivElement, document.getElementById('example'));


//要渲染 React 组件，只需建立一个大写字母开头的本地变量。
var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent  />;
React.render(myElement, document.getElementById('example'));

 

 

4.重点之一:复合组件

var WebSite = React.createClass({
  render: function() {
    return (
      <div>
        <Name name={this.props.name} />
        <Link site={this.props.site} />
      </div>
    );
  }
});
 
var Name = React.createClass({
  render: function() {
    return (
      <h1>{this.props.name}</h1>
    );
  }
});
 
var Link = React.createClass({
  render: function() {
    return (
      <a href={this.props.site}>
        {this.props.site}
      </a>
    );
  }
});
 
ReactDOM.render(
  <WebSite name="菜鸟教程" site=" http://www.runoob.com" />,
  document.getElementById('example')
);

 

 

5.重点之二：动态组件

var MyComponent=React.createClass({
  getInitialState: function() {
       return {clickNum: 0};
  },
  handleClick:function(){                       //组件的事件动做 var num=this.state.clickNum; //组件的状态
    num++;
    this.setState({clickNum:num});
  },
  render: function() {
   return (
      <div>  
        <h1 onClick={this.handleClick}>Hello {this.props.name}!</h1>       //组件的属性
        <h2 style={{color:'red'}}>点击{this.props.name}次数：{this.state.clickNum}</h2>
      </div>
    );
 }
});
ReactDOM.render(
  <div>
     <MyComponent name="张三" />
     <hr/>
     <MyComponent name="李四" />
  </div>,
 document.getElementById('example')
);

上面代码中定义的MyComponent组件包含属性，状态和事件，是一个简单的比较完整的组件。使用props经过父组件进行传递值，使用state定义组件本身的状态，组件支持的大部分的DOM操做事件。

 

 

6.关于状态state：

        React 里，只需更新组件的 state，而后根据新的 state 从新渲染用户界面（不要操做 DOM）。

• 组件免不了要与用户互动，React 将组件当作是一个状态机，一开始有一个初始状态，而后用户互动，致使状态变化，从而触发从新渲染 UI。
• getInitialState 方法用于定义初始状态，也就是一个对象，这个对象能够经过 this.state 属性读取。当用户点击组件，致使状态变化，this.setState 方法就修改状态值，每次修改之后，自动调用 this.render 方法，再次渲染组件。
• 因为 this.props 和 this.state 都用于描述组件的特性，可能会产生混淆。
• 一个简单的区分方法是，this.props 表示那些一旦定义，就再也不改变的特性，而 this.state 是会随着用户互动而产生变化的特性。
• 例如：

 

7.关于Props：

（1）state 和 props 主要的区别在于 props 是不可变的，而 state 能够根据与用户交互来改变。这就是为何有些容器组件须要定义 state 来更新和修改数据。 而子组件只能经过 props 来传递数据

 

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

 （2）Props验证：

Props 验证使用 propTypes，它能够保证咱们的应用组件被正确使用，React.PropTypes 提供不少验证器 (validator) 来验证传入数据是否有效。当向 props 传入无效数据时，JavaScript 控制台会抛出警告。

如下实例建立一个 Mytitle 组件，属性 title 是必须的且是字符串，非字符串类型会自动转换为字符串 ：

var title = "菜鸟教程";
// var title = 123;
var MyTitle = React.createClass({
  propTypes: {
    title: React.PropTypes.string.isRequired,
  },
 
  render: function() {
     return <h1> {this.props.title} </h1>;
   }
});
ReactDOM.render(
    <MyTitle title={title} />,
    document.getElementById('example')
);

　　

 

8.获取真实的DOM：

组件并非真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫作虚拟 DOM （virtual DOM）。只有当它插入文档之后，才会变成真实的 DOM 。
有时须要从组件获取真实 DOM 的节点，这时就要用到 ref 属性。

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

为了获取真是DOM节点，html元素必须有一个 ref 属性，而后 this.refs.[refName] 就会返回这个真实的 DOM 节点。 须要注意的是，因为 this.refs.[refName] 属性获取的是真实 DOM ，因此必须等到虚拟 DOM 插入文档之后，才能使用这个属性，不然会报错