组件与元素

元素 React :React element它是 React 中最小基本单位

我们可以使用 JSX 语法轻松地创建一个 React 元素:

1	const element = <div className="element">I'm an element</div>

React 元素不是真实的 DOM 元素，它仅仅是 js 的普通对象（plain objects），所以也没办法直接调用 DOM 原生的 API。上面的 JSX 转译后的对象大概是这样的：

{
    _context: Object,
    _owner: null,
    key: null,
    props: {
    className: 'element'，
    children: 'I'm element'
  },
    ref: null,
    type: "div"
}

React 组件

React 中有三种构建组件的方式。React.createClass()、ES6 class和无状态函数。

React.createClass()

React.createClass()是三种方式中最早，兼容性最好的方法。在0.14版本前官方指定的组件写法。

var Greeting = React.createClass({
  render: function() {
    return <h1>Hello, {this.props.name}</h1>;
  }
});

ES6 class

ES6 class是目前官方推荐的使用方式，它使用了ES6标准语法来构建，但它的实现仍是调用React.createClass()来实现了，ES6 class的生命周期和自动绑定方式与React.createClass()略有不同。

class Greeting extemds React.Component{
  render: function() {
    return <h1>Hello, {this.props.name}</h1>;
  }
};

无状态函数

无状态函数是使用函数构建的无状态组件，无状态组件传入props和context两个参数，它没有state，除了render()，没有其它生命周期方法。

1
2
3

function Greeting (props) {
  return <h1>Hello, {props.name}</h1>;
}

React.createClass()和ES6 class构建的组件的数据结构是类，无状态组件数据结构是函数，它们在 React 被视为是一样的。

元素与组件的区别

组件是由元素构成的。元素数据结构是普通对象，而组件数据结构是类或纯函数

属性:props 一般属性是不改变的,经常作为传入的数据.

例: 建立PropsTest组件,在网页上输出简单的 Hello, XXX, XXX为传入的属性name,当name为空时,输出Hello,World 输入为其他值时,比如:Curry,输出Hello,Curry

<script type="text/babel"> 

    class PropsTest extends React.Component{  

        render: function () {  

            return (  

                    <div>  

                        Hello, {this.props.name? this.props.name: "World"}  

                    </div>  

            );  

        }  

    };  

    ReactDOM.render(  

            <PropsTest name="Curry"/>,  

            document.body  

    );  

</script>

状态:state 一般状态是不断变化的,空间内部可以控制state的变化

例: 建立StateTest组件,实现在输入框中输入数据XXX,输入Hello, XXX. XXX随着输入框的输入内容而改变.

在render方法中定义

Hello, {this.state.name}

, 定义input,并添加onChange方法textChange, 在方法里面代码实现name的值随输入的值改变

代码如下:

<script type="text/babel">  
	class StateTest extends React.Component {  
        getInitialState: function () {  
	        return {  
               name: 'World'  
            }  
        },  
        textChange: function (event) {  
            this.setState({  
                name: event.target.value  
            });  
        },  
        render: function () {  
            return (  
                    <div>  
                        <p>Hello, {this.state.name}</p>  
                        <input type="text" onChange=										{this.textChange} />  
	                </div>  
             );  
         }  
     };  
     ReactDOM.render(  
             <StateTest />,  
             document.body  
     );  
</script>