react近期总结

来源：互联网发布：复杂网络分析软件编辑：程序博客网时间：2024/06/02 05:11

这篇文章仅用于本人对于react知识的总结,只包含了一些基础知识，若出现错误请在评论中告知我（我也是正在学习中），文章内容我会在后面继续更改和添加,更多详细内容可以查看菜鸟教程或者官方文档

1.JSX

JSX是一个js的语法扩展，它被写出来供React使用，他不是合法的js，浏览器不能识别它。但是它会被JSX编译器编译成正规的js代码。

<h1>Hello World</h1>; //在React中这是一个JSX元素，不是html元素

唯一显而易见的不同是你会在一个js文件中发现它。JSX元素会像js表达式一样被对待，他们可以放在任何js表达式可以放置的位置，这就意味着一个JSX元素可以被存储在一个变量中，传递给一个函数，存储在一个对象或者数组中，等等。。。
JSX元素拥有属性，就像HTML元素一样，并且可以给JSX中的元素添加自定义属性，添加自定义属性需要使用data-前缀。就像这样：

<p data-myattribute = "somevalue">hello world</p>;

你也可以将一个JSX元素放置到另一个JSX元素里面,但是对于多行的JSX表达式，你应该讲他放置到括号里();一个JSX表达式必须刚好最外面有一个元素。例如下面这种写法是错误的：

<p>i am a paragraph</p><p>i am another paragraph</p>

你需要用一个div标签将他包裹：

<div><p>i am a paragraph</p><p>i am another paragraph</p></div>

在JSX中，你必须使用className替代class.
当你写一个单标签时必须包含一个斜线。例如img:

<img />

在JSX表达式中，每一个被放在花括号里的事物都会像一个正规的JS表达式被对待。
JSX元素也可以拥有事件监听，就像HTML元素一样。一个事件监听属性名字应该像onClick或者onMouserover：一个on再加上事件类型，并且事件名称应该使用驼峰法命名。这里有react中的事件。
在JSX表达式中，你不能使用if else语句，但是你可以使使用三元运算符。

2.组件

React的应用都是由组件组成，一个组件是一个可重复使用的代码块，为了某一个工作，这个工作经常去渲染一些HTML。需要注意的是 html元素名以小写开头，而自定义的react组件都是以大写开头。每一个组件必须使用react.createClass创建，它就像一个创建components的工厂。如果你有一个componnet类，那你就可以使用它去生产任意个实例组件，只要你想。react.createClass的参数必须是一个js对象，这个对象只有一个属性你必须设置：一个render函数,当然还可以有其他属性。同时，我们很多时候需要给组件传递参数，参数写在实例中，在组件类中用 this.props.+参数名 获得。

3.state

React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。其中：getInitialState方法用于定义初始状态，也就是一个对象；this.state用于获取这个对象；this.setState方法用于修改状态值，每次修改以后，自动调用this.render方法再次渲染组件.

4.props

state可变，props不可变。大多数使用props是在组件之间传递信息，它是一个对象名，这个对象存储着传递的信息，在组件类中可以使用this.props.+名称获得对象中的属性。。

5.实例

最后我自己写了个实例方便理解上面提到的几个东西

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title>react test</title>    </head>    <style>        #example{            text-align: center;        }    </style>    <body>        <div id="example"></div>        <!--先导入几个必要的js库-->        <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>        <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>        <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>        <script type="text/babel">            var MyName = React.createClass({                render:function(){                    return <p>my name is {this.props.name}</p>;                }    //总结一个错误：我总爱在这后面加一个 ； 符号，一旦写了一个符号就会出错            });            var MyHobby = React.createClass({                render:function(){                    return <p>I like playing {this.props.hobby}!</p>;                }            });            var Who = React.createClass({                getInitialState:function(){                    return {change:true};                },                eClick:function(){                    this.setState({change:!this.state.change});                },                render:function(){                    var name = this.state.change ? 'jzx' : 'sst';                    return (                        <div>                            <p onClick={this.eClick}>who is {name}?</p>  {/*这里的点击事件不能写成onClick="this.eClick"---标签内注释需要写在大括号里*/}                            <MyName name={name} />                            <MyHobby hobby={this.props.hobby} />                        </div>                    );                }            });            ReactDOM.render(                <Who hobby="game" />,                document.getElementById("example")  //这里最后也不能加 ; 符号，我总是惯性的加上            );        </script>    </body></html>

梳理下上面的代码的逻辑，先声明了三个组件类，前两个组件类各返回一个p标签，表明一个人的名字和爱好，名字和爱好都是在实例中传递给他们的，使用this.props. 获取。第三个组件类较复杂一点，主要是在render函数中实例化了前面两个组件类，并传递了信息给他们，并且设置了初始化状态函数和点击事件函数，当点击事件触发，就改变组件的change状态，由于组件render函数中某一部分内容是根据change状态的值来渲染的，所以当点击事件发生时，渲染的内容也会产生改变，大致就是这么回事了~~~

如果发现错误，请在评论中告诉我，谢谢！！！

阅读全文

0 0