react学习总结

    react最早是facebook开源的用于在移动端开发的框架，最早是react native，支持iphone设备，后来支持android，最后慢慢发展为支持web，可以直接在nodejs中使用，也可以直接在前端项目中通过<script type="text/javascript" src="react.js"></script><script type="text/javascript" src="react-dom.js"></script><script type="text/javascript" src="browser.min.js"></script>脚本引入页面的方式来和普通的js库一样使用。

     使用react，最重要的一点就是需要学会jsx语法，它和普通的js语法最大的不同之处是，他构建的html模板是不用引号括起来的，而且react组件最外层必须用一个元素包裹，一般是使用div元素。如下所示：

ReactDOM.render(<div>hello,react.</div>,document.getElementById("root"));

    ReactDOM.render(component,element)方法接收两个参数，第一个就是我们的html模板，也可以是自定义的组件，第二个元素是挂载点，一般是一个带有ID的div元素。其中的html模板，在以往的框架比如jQuery或者原生的javascript中，我们需要通过引号将模板括起来，比如：

"<div>hello,react.</div>"

    但是这里是jsx语法，就不需要引号了，直接是模板：

<div>hello,react.</div>

     既然是jsx的语法，浏览器怎么识别呢，这就需要一个转换库可以选择babel或者browser。我们写的jsx语法的脚本，需要通过<script type="text/babel"></script>标签来包裹，就不再是原来的<script type="text/javascript"></script>了。

     编写组件有三种方式，最原始的是通过函数的形式，如：

function HelloMessage(){
    return <h2>hello,react.</h2>;
}

    这种形式的组件也叫无状态组件（Stateless Component），还可以通过es5的方式编写组件，比如：

React.createClass({
    render : function(){
        return <h2>hello,react.</h2>
    }
});

    在es6中我们可以通过书写class的方式来定义组件，比如：

class HelloMessage extends React.Component{
    render(){
        return <h2>hello,react.</h2>;
    }
}

    这种方式定义的组件，需要继承React.Component。后面两种方式定义的组件也叫有状态组件。

    我们在定义事件绑定的时候，默认我们需要在构造函数中对函数进行如下的绑定：

    另外也有两种方式，一种是在调用的地方使用箭头函数的方式：

    再一个就是直接在调用的地方进行绑定： 

 

    我们知道，jsx语法规定，任何模板最外层，必须要有一个元素包裹，比如有多个平行的元素如：<li>1</li><li>22</li><li>333</li>，在进行渲染的时候，如果最外层没有元素包裹是会报错的。

browser.min.js:39 Uncaught SyntaxError: embedded: Adjacent JSX elements must be wrapped in an enclosing tag (2:29)
  1 | 
> 2 |         var list = <li>1</li><li>22</li><li>333</li>;
    |                              ^
  3 | 		ReactDOM.render(list,document.getElementById("root"));
  4 |     
    at Parser.pp.raise (browser.min.js:39)
    at Parser.pp.jsxParseElementAt (browser.min.js:41)
    at Parser.pp.jsxParseElement (browser.min.js:41)
    at Parser.parseExprAtom (browser.min.js:41)
    at Parser.pp.parseExprSubscripts (browser.min.js:38)
    at Parser.pp.parseMaybeUnary (browser.min.js:38)
    at Parser.pp.parseExprOps (browser.min.js:38)
    at Parser.pp.parseMaybeConditional (browser.min.js:38)
    at Parser.pp.parseMaybeAssign (browser.min.js:38)
    at Parser.pp.parseVar (browser.min.js:39)

    我们在模板最外层加上<div></div>包裹，就好了。

    这种方式虽然不会报错，但是也很别扭，正常来说ul元素的下一级直接就是li元素，但是中间隔着一层div，如何能够不要div，而且语法也不报错呢。我们可以将<div></div>写成<React.Fragment></React.Fragment>，前提是使用的React版本是16及以上。

<script type="text/babel">
	class ListItem extends React.Component{
		render(){
			return (<React.Fragment><li>1</li><li>22</li><li>333</li></React.Fragment>);
		}
	}
	ReactDOM.render(<ListItem />,document.getElementById("root"));
</script>

    这时候生成的html结构就是很理想了。