react快速入门(一)

react react教学

React

1、优势

虚拟dom和组件化开发。
虚拟dom：浏览器是产生性能瓶颈的原因。（渲染方面）

虚拟dom：
网页产生过程：HTML——DOM进行排布。样式渲染上去。
不同的事件——不同的DOM展示。——重新渲染页面。
动画、事件——就会产生渲染瓶颈。

react维护两个状态——现在的页面DOM、即将要渲染的页面DOM（数据）
对比：自动渲染不同部分。

每次发生事件、动画，都会和之前的状态进行对比。
相同：不再次进行渲染。
不同：进行渲染界面。

适合大量数据操作的框架——react。

组件化开发：
vue——为了复用。

最顶层仅仅只有一个dom元素。（根元素）

<div>
    <header></header>
    <content></content>
    <footer></footer>    
</div>

组件树。

2、react的hello world示例：

<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'>
    ReactDOM.render(<h1>hello world</h1>,document.getElementById('root'))
</script>

第二个问题：什么组件。

组件：把一部分、可以用来复用的dom元素，进行分离，给它一个名字（通过function、class的方式）。然后用到项目中。
定义一个组件：

var Hello = React.createClass({
    render: function (){ 
        return (<div>hello world!</div>)
    }
})

在node环境下的项目中：

class Hello extends Component{
    render(){ 
        return (
                            <div>hello world!</div>
                        )
    }
}

第三个问题：props。

组件传值。
在组件的属性中，可以进行传值。一般这样写

<App isShow='123' />

在子组件中，这样使用：

{ this.props.isShow }.

第四个问题：state

state相比于props，它可以被改变。

改变的方式就是this.setState({});

state存在的意义，用来定义页面状态的！

this.state.like ? <Hello /> : <Like />

props是用来干什么？ 组件传值——this.props.title.

state是用来定义页面状态——this.state.title.
在vue中——是通过this.title就可以直接访问。（props和data是不能同名的！！！）

定义state:
在页面中：

getInitialState(){
    return {
        like: true
    }
}

使用方式： this.state.like.

在render函数中：本质上是返回一个dom元素。

render: function(){
    return <div></div>
}

getInitialState函数中：本质上返回的是一个对象。必须用{}；

getInitialState(){
    return {
        like: true
    }
}

第五个问题：JSX。

什么是JSX：它是HTML以及Js进行混写的一种语法。

可以被解析：以尖括号开头或者结尾，我们使用HTML的方式解析。以大括号开头或者结尾，使用Js的方式解析。

关于jsx语法中的js部分，具体是什么东西？

1、可以写变量。（props、state）。
2、表达式。——进行加减乘除运算的。
3、三目运算符。——对react来说，它的本质就是进行条件渲染的。
4、数组。——jsx的语法中，数组可以被解析。

第六个问题、条件渲染。

vue——v-if
angular——ng-if
但是在react中——三目运算符

<div> { this.state.like ? <span>like</span>:<span>dislike</span> } </div>

第七个问题、列表渲染。数组！

react中，进行列表渲染的东西是一个数组，对这个数组进行map遍历。
基本语法规则：

{ this.state.arr.map((item,index) => {
    return <div key={index}>{ item }</div>
})}

第八个问题、样式问题

1、class。

在react中，定义一个类，使用className的方式来实现。

2、style。

在react中，使用对象的方式也可以描述样式。

外层大括号——代表jsx语法
内层大括号——代表是一个对象

3、优先级方面。style > className

第九个问题、组件传值问题

react中，props。
父传子：在子页面，this.props.title。
子传父：
父组件中：定义一个属性，这个属性的值是一个父元素的方法。
子组件中：通过事件（click），在子组件中，执行父元素传递下来的方法。把参数携带过去！！！
clickEvent(){
this.props.parent(123);
}

第十个问题、事件

react中，事件是直接写在DOM中的。
onClick——写在dom中。
基本的规则：
第一种写法：

<div onClick={ this.clickEvent }>click</div>

第二种写法：

<div onClick={ () => { this.clickEvent(index) } }>click</div>

onChange事件、onInput事件。——事件对象e，value = e.target.value

第十一个问题、生命周期函数。

第一、函数名以及函数执行的时机

函数的方式
getInitialState：组件的状态。

class的方式
constructor：描述组件的状态

//mounting
componentWillMount：组件挂载之前调用
render: 组件向界面渲染的函数。
componentDidMount：组件挂载之后调用
//updating，数据发生改变，setState之后。
componentWillUpdate: 组件更新之前调用
shouldComponentUpdate：组件是否更新
componentDidUpdate：组件更新完毕
//Unmounting
componentWillUnmount: 组件销毁之前调用
componentWillReciveProps: 当父元素向子元素传递props时调用。

第二、函数的执行顺序

（1）初次挂载组件的时候：
getInitialState——componentWillMount——render——componentDidMount

关于shouldComponentUpdate：（如何对react进行性能优化）
只要在界面定义了这个函数，就必须给它返回一个true或者false，根据true或者false，来决定页面的dom是否重新渲染。

（2）从后台请求过来数据，this.setState之后，是什么样的执行顺序:

shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate

任何情况下，无论这个状态与页面有没有关系，只要setState状态改变，它一定触发render，进行界面更新。

（3）如果父元素向子元素传递一个props，这会发生什么？？？周期函数的执行顺序是什么？

componentWillReciveProps——shouldComponentUpdate——componentWillUpdate——render——componentDidUpdate。

总结出的规律：

第一、如果没有性能优化，只要传递一个props、或者执行this.setState,整个组件都会重新渲染。
第二、当传递的props发生改变，子组件也会重新渲染。
第三、react性能优化：根据nextProps、nextState进行判断，返回一个true或者false。
如何进行性能优化：看你界面中的状态，和dom渲染有没有关系，没有关系——shouldComponentUpdate返回值为false。

shouldComponentUpdate: function (nextProps, nextState) {
    console.log('nextProps',nextProps);
    console.log('nextState',nextState);
    if(nextState.index !== this.state.index){
        return false
    } else {
        return true;
    }
},

jsx.

条件渲染
列表渲染
样式
组件传值
事件
周期函数