react.js总结学习

来源：互联网发布：linux 杀dhcp进程编辑：程序博客网时间：2024/06/05 10:03

React jsx 语法

React 使用jsx来替代javascript语法。

实际上html语言直接写在javaScript语言中，这就是jsx语法，而且不加任何引号。属于javascript的语法变量使用 {} 表示。

入门实例：

<!DOCTYPE html><html><head><title></title><script src="react-15.3.1/build/react.min.js"></script><script src="react-15.3.1/build/react-dom.min.js"></script><script src="react-15.3.1/build/browser.min.js"></script></head><body><div id="example"></div><script type="text/babel">ReactDOM.render(<h2>Hello,world</h2>,document.getElementById('example'))</script></body></html>

这里的type类型要注意了，不再是 “ text/javascript” 而是： text/babel 。因为使用的是jsx的语法，所以这里必须添加。

使用到的一个库：browser ，这个库是将jsx语法转换成javascript语法。

ReactDOM.render()是React的最基本方法，用于将模版转换为html语言，并插入到指定的模板节点中。

ReactDOM.render(<h2>Hello,world</h2>,document.getElementById('example'))

上边是将h2标签插入到example节点中。

独立文件的引入

比如一个外部的react.js代码要引入到里面来。

<body>  <div id="example"></div><script type="text/babel" src="helloworld_react.js"></script></body>

语法内部的注释

{/*注释*/}

例如：

ReactDOM.render(<h2>Hello,world</h2>，         {/*注释*/}document.getElementById('example'))

插入数组：

<script type="text/babel">var arr = [<h3>xixi</h3>,<h3>haha</h3>];ReactDOM.render(<h2>{arr}</h2>,document.getElementById('example0'))</script>

实例二

<script type="text/babel">var arr = ['alice','emily','kate'];ReactDOM.render(<div>{arr.map(function(name){return <div>Hello,{name}</div>})}</div>,document.getElementById('example0'));</script>

使用样式：

<script type="text/babel">var myStyle = {fontSize:20,color:'#FF0000'};ReactDOM.render(<div><h1 style={myStyle}> w3cschool</h1><h2>欢迎学习 React</h2></div>,document.getElementById('example'));</script>

组件：

React 因为有了组件，开发的效率才会非常的高，因为组件的复用性能非常的好，组件封装好了后，就像html普通的标签一样，可以进行插入这个组件。

生成一个组件使用React.createClass

例如：

<script type="text/babel">var HelloMessage = React.createClass({render(){return (<h1>Hello World! {this.props.name}</h1>);}});ReactDOM.render(<HelloMessage name="xixihaha"/>,document.getElementById('example1'))</script>

注意：

所有的组件必须要有自己的render方法。

在ReactDOM.render()方法中，内部的两条语句之间必须是一个逗号。

组件的引用变量必须是大写字母开头，如果用小写字母开头，会报错。

上边的组件添加了一个属性，name=xixihaha

这个属性，会传递到组件对象中，使用 this.props.name就可以读取到组件的属性值。

组合组件

就是将多个组件组合起来。

<script type="text/babel">var WebSite = React.createClass({render(){return(<div><Name name={this.props.name}/><Link site={this.props.site}/></div>)}});var Name = React.createClass({render(){return(<h1>{this.props.name}</h1>)}});var Link = React.createClass({render(){return(<a href={this.props.site} target="_black">{this.props.site}</a>)}});ReactDOM.render(<WebSite name="w3cschool" site="https://www.baidu.com"/>,document.getElementById('example2'))</script>

this.state

React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。
React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）.

一开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染 UI .

<script type="text/babel">var LikeButton = React.createClass({getInitialState(){return {liked:false};},handleClick(event){this.setState({liked:!this.state.liked});},render(){var text = this.state.liked ? "喜欢" : "不喜欢";return(<p onClick={this.handleClick}>你<b>{text}</b>点我切换状态</p>)}});ReactDOM.render(<LikeButton/>,document.getElementById('example3'))</script>

在定义组件时，方法和方法之间必须使用逗号隔开。

初始化：

getInitialState(){return {liked:false};},

在return方法中可以使用多个属性：

return {liked:false,xiix:"",isshow:true,};

this.props

state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。而子组件只能通过 state 来传递数据。

<div id="example4"></div><script type="text/babel">var MyTitle = React.createClass({render(){return <h1>{this.props.title}</h1>;},});ReactDOM.render(<MyTitle title="title"/>,document.getElementById('example4'))</script>

默认的props

当不给props设置参数时，可以设置一个默认的值。

通过getDefaultProps()方法。

<script type="text/babel">var MyTitle = React.createClass({getDefaultProps(){return{title:'title'}},render(){return <h1>{this.props.title}</h1>;},});ReactDOM.render(<MyTitle/>,document.getElementById('example4'))</script>

state和props一起使用

<script type="text/babel">var WebSite = React.createClass({getInitialState(){return{name:"title",site:'https://www.baidu.com'}},render(){return(<div><Name name={this.state.name}/><Link site={this.state.site}/></div>)}});var Name = React.createClass({render(){return(<h1>{this.props.name}</h1>)}});var Link = React.createClass({render(){return(<a href={this.props.site} target="_black">{this.props.site}</a>)}});ReactDOM.render(<WebSite/>,document.getElementById('example2'))</script>

Props验证

组件的属性可以接受任意值，字符串、对象、函数等等都可以。有时，我们需要一种机制，验证别人使用组件时，提供的参数是否符合要求。
组件类的PropTypes属性，就是用来验证组件实例的属性是否符合要求。

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

<script type="text/babel">var MyTitle = React.createClass({propTypes:{title:React.PropTypes.string.isRequired,},render(){return <h1>{this.props.title}</h1>;},});ReactDOM.render(<MyTitle title="react js学习"/>,document.getElementById('example4'))</script>

可选的基本类型：

propTypes: {    // 可以声明 prop 为指定的 JS 基本数据类型，默认情况，这些数据是可选的    optionalArray: React.PropTypes.array,    optionalBool: React.PropTypes.bool,    optionalFunc: React.PropTypes.func,    optionalNumber: React.PropTypes.number,    optionalObject: React.PropTypes.object,    optionalString: React.PropTypes.string,}

React 组件生命周期

组件的生命周期可分成三个状态：
Mounting：已插入真实 DOM
Updating：正在被重新渲染
Unmounting：已移出真实 DOM

生命周期方法有：

componentWillMount 在渲染前调用,在客户端也在服务端。
componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异部操作阻塞UI)。
componentWillReceiveProps 在组件接收到一个新的prop时被调用。这个方法在初始化render时不会被调用。
shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。可以在你确认不需要更新组件时使用。
componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。
componentWillUnmount在组件从 DOM 中移除的时候立刻被调用。

<script type="text/babel">var Hello = React.createClass({getInitialState(){return{opacity:1.0}},componentDidMount(){this.timer = setInterval(function(){var opacity = this.state.opacity;opacity -= 0.05;if(opacity < 0.1){opacity = 1.0 ;}this.setState({opacity:opacity})}.bind(this),100);},render(){return (<div style={{opacity:this.state.opacity}}>hello {this.props.name}</div>)}});ReactDOM.render(<Hello name="world"/>,document.getElementById('example5'))</script>

React AJAX

React 组件的数据可以通过 componentDidMount 方法中的 Ajax 来获取，当从服务端获取数据库可以将数据存储在 state 中，再用 this.setState 方法重新渲染 UI。
当使用异步加载数据时，在组件卸载前使用 componentWillUnmount 来取消未完成的请求。

<script type="text/babel">var UserGist = React.createClass({getInitialState(){return {username:'',lastGistUrl:''}},componentDidMount(){this.serverRequest = $.get(this.props.source,function(result){var lastGist = result[0];this.setState({username:lastGist.owner.login,lastGistUrl:lastGist.owner.html_url});}.bind(this));},componentWillUnMount(){this.serverRequest.abort();},render(){return(<div>{this.state.username}用户最新的 Gist 共享地址:<a href={this.state.lastGistUrl}>{this.state.lastGistUrl}</a></div>)}});ReactDOM.render(<UserGist source="https://api.github.com/users/octocat/gists"/>,document.getElementById('example8'))</script>

这里的异步请求使用的是jquery

ref属性

React 支持一种非常特殊的属性 Ref ，你可以用来绑定到 render() 输出的任何组件上。
这个特殊的属性允许你引用 render() 返回的相应的支撑实例（ backing instance ）。这样就可以确保在任何时间总是拿到正确的实例。

组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。只有当它插入文档以后，才会变成真实的 DOM 。根据 React 的设计，所有的 DOM 变动，都先在虚拟 DOM 上发生，然后再将实际发生变动的部分，反映在真实 DOM上，这种算法叫做 DOM diff ，它可以极大提高网页的性能表现。
但是，有时需要从组件获取真实 DOM 的节点，这时就要用到 ref 属性。

<script type="text/babel">var MyComponent = React.createClass({handleClick(){this.refs.myinput.focus();},render(){return (<div><input type="text" ref="myinput"/><input type="button"   value="点击我输入框获取焦点"   onClick={this.handleClick} /></div>)}})ReactDOM.render(<MyComponent/>,document.getElementById('example6'))</script>

0 0