React.js笔记

最新推荐文章于 2023-03-02 16:32:13 发布

Little-Gao

最新推荐文章于 2023-03-02 16:32:13 发布

阅读量237

点赞数

分类专栏： React 文章标签： React

本文链接：https://blog.csdn.net/sinat_24227777/article/details/72812021

版权

React 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1 创建第一个组件

2 组件嵌套

3 组件的状态

4 组件的通信

5 Ref指向

6 单向数据流

7 React组件生命周期

注：使用了 React 的版本为 15.4.2，你可以在官网 http://facebook.github.io/react/ 下载最新版。

1 创建第一个组件

1.1 花括号{}

花括号{}解析表达式，三元表达式

花括号{}不能出现在Return的第一层

//1 创建第一个组件

var MessageComponent=React.createClass({

render:function(){

//告诉React要渲染的内容

return(

<div>

{/*花括号不能出现在return第一层，故用div包起来*/}

{false?<div style={style}>上海大众</div>:<div>Little_Gao</div>}

</div>

);

}

});

1.2 样式

方法一：组件中使用变量

var style={

background:'wheat'

};

  <div style={style}>上海大众</div> 

方法二：外部样式，组件中使用className

<style>

.app{

background: coral;

}

</style>

方法三：渲染组件时，外面包一层

//变量、className

2 组件嵌套

//第一个组件

var Hello=React.createClass({

render:function(){

return(

//组件嵌套

);

}

});

//第二个组件

var Company=React.createClass({

render:function(){

return(

);

}

});

//渲染组件

ReactDOM.render(

<Hello/>,

document.getElementById('container'),

function(){

console.log('渲染完成');

}

);

</script>

3 组件的状态

* 组件状态 state

* 每一次state值改变，都会重新执行render方法，来进行渲染

* diff算法，会来计算哪里发生改变，只重新渲染改变的地方

* */

//创建组件

var Message=React.createClass({

//初始化state

getInitialState:function(){

return({

name:'同济大学'

});

changeState:function(){

this.setState({

name:'上海交通大学'

});

//获得state内的值

render:function(){

return(

<div onClick={this.changeState}>欢迎来到—{this.state.name}</div>

);

}

});

//渲染组件

ReactDOM.render(

<Message/>,

document.getElementById('container'),

function(){

console.log('渲染完成');

}

);

</script>

4 组件的通信

——利用state & props

/**

* 组件通讯 props

* 大多数情况下是父组件向子组件通讯的

* */

//父组件

var Parent=React.createClass({

changeText:function(){

alert("我被子组件调用了");

render:function(){

return(

//父组件向子组件传name

//子组件调用父组件方法,给子组件添加自定义属性changeText

<div>父组件接受到了:{this.props.name}--><Child changeText={this.changeText} name="斯柯达"/></div>

);

}

});

//子组件

var Child=React.createClass({

render:function(){

return(

<span onClick={this.props.changeText}>子组件接收到了:{this.props.name}</span>

);

}

});

//渲染组件

ReactDOM.render(

//渲染过程向父组件传name

<Parent name="上海大众"/>,

document.getElementById('container'),

function(){

console.log('渲染完成');

}

);

</script>

5 Ref指向

//创建组件

var Message=React.createClass({

handleClick:function(){

//方法一

console.log('方法一：'+this.refs.input.value);

//方法二

console.log("方法二："+this.refs['input'].value)

render:function(){

return(

//return多个标签时，需要用<div>将它们包起来

<div>

<button onClick={this.handleClick}>点击获取input值</button>

</div>

);

}

});

//渲染组件

ReactDOM.render(

<Message/>,

document.getElementById('container'),

function(){

console.log('渲染完成');

}

);

</script>

6 单向数据流

<style>

.div{

border: 1px solid royalblue;

width: 200px;

height: 100px;

margin-top: 20px;

padding: 10px;

}

</style>

//input组件

var Message=React.createClass({

//初始化state

getInitialState:function(){

return({

inputContent:''

});

//设置state

handleChange:function(event){

this.setState({

inputContent:event.target.value

});

render:function(){

return(

<div>

</div>

);

}

});

//show组件

var Show=React.createClass({

render:function(){

return(

<div className="div">{this.props.content}</div>

);

}

});

//渲染组件

ReactDOM.render(

<Message/>,

document.getElementById('container'),

function(){

console.log('渲染完成');

}

);

</script>

7 React组件生命周期

7.1 初始化阶段

初始化一些内容和值，将其渲染出来

             <div id="container"></div> 
 
             <script type="text/babel"> 
 
                 /** 
 
                  * 组件生命周期 
 
                  * */ 
 
                 //创建组件 
 
                 var Message=React.createClass({ 
 
                      getDefaultProps:function(){ 
 
                           console.log('getDefaultProps'); 
 
                      }, 
 
                      getInitialState:function(){ 
 
                           console.log('getInitialState'); 
 
                           return({ 
 
                           }); 
 
                      }, 
 
                      componentWillMount:function(){ 
 
                           console.log('组件将要渲染'); 
 
                      }, 
 
                      componentDidMount:function(){ 
 
                           console.log('组件渲染完成'); 
 
                      }, 
 
                      render:function(){ 
 
                           console.log('渲染'); 
 
                           return( 
 
                                <div>上海大众</div> 
 
                           ); 
 
                      } 
 
                 }); 
 
                 //渲染组件 
 
                 ReactDOM.render( 
 
                      <Message/>, 
 
                      document.getElementById('container'), 
 
                      function(){ 
 
                           console.log('渲染完成'); 
 
                      } 
 
                 ); 
 
             </script>

控制台信息：

getDefaultProps

getInitialState

组件将要渲染

渲染

组件渲染完成

渲染完成

7.2 进行中阶段

更新数据或重新渲染节点

/**

* 组件生命周期

* */

//父组件

var Message=React.createClass({

getDefaultProps:function(){

console.log('getDefaultProps');

getInitialState:function(){

console.log('getInitialState');

return({

name:'上海大众'

});

componentWillMount:function(){

console.log('组件将要渲染');

componentDidMount:function(){

console.log('组件渲染完成');

shouldComponentUpdate:function(nextProps,nextState){

console.log(nextState);

console.log('shouldComponentUpdate');

//true更新，false不更新

return true;

componentWillUpdate:function(){

console.log('组件将要被更新');

componentDidUpdate:function(){

console.log('组件更新完毕');

clickEvent:function(){

this.setState({

name:'保时捷'

});

render:function(){

console.log('渲染');

return(

<div>

<div>{this.state.name}</div>

<button onClick={this.clickEvent}>点击改变内容</button>

</div>

);

}

});

//子组件

var Child=React.createClass({

//子组件将要更新属性

componentWillReceiveProps:function(nextProps){

console.log(nextProps);

console.log('componentWillReceiveProps');

render:function(){

return(

<span>{this.props.name}</span>

);

}

});

//渲染组件

ReactDOM.render(

<Message/>,

document.getElementById('container'),

function(){

console.log('渲染完成');

}

);

</script>

点击更新按钮后，父组件将进行更新，父组件中的子组件更新完后，父组件继续更新，父组件更新完毕

控制台信息：

getDefaultProps

getInitialState

组件将要渲染

渲染

组件渲染完成

渲染完成

Object {name: "保时捷"}//父组件

shouldComponentUpdate//允许组件更新

组件将要被更新

渲染

Object {name: "保时捷"}//子组件

componentWillReceiveProps

组件更新完毕

7.3 销毁阶段

/**

* 组件生命周期

* */

//父组件

var Message=React.createClass({

getDefaultProps:function(){

console.log('getDefaultProps');

getInitialState:function(){

console.log('getInitialState');

return({

name:'上海大众'

});

componentWillMount:function(){

console.log('组件将要渲染');

componentDidMount:function(){

console.log('组件渲染完成');

shouldComponentUpdate:function(nextProps,nextState){

console.log(nextState);

console.log('shouldComponentUpdate');

//true更新，false不更新

return true;

componentWillUpdate:function(){

console.log('组件将要被更新');

componentDidUpdate:function(){

console.log('组件更新完毕');

clickEvent:function(){

this.setState({

name:'保时捷'

});

componentWillUnmount:function(){

console.log('组件将要销毁');

killComponent:function(){

ReactDOM.unmountComponentAtNode(document.getElementById('container'));

render:function(){

console.log('渲染');

return(

<div>

<div>{this.state.name}</div>

<button onClick={this.clickEvent}>点击改变内容</button>

</div>

);

}

});

//子组件

var Child=React.createClass({

//子组件将要更新属性

componentWillReceiveProps:function(nextProps){

console.log(nextProps);

console.log('componentWillReceiveProps');

render:function(){

return(

<span>{this.props.name}</span>

);

}

});

//渲染组件

ReactDOM.render(

<Message/>,

document.getElementById('container'),

function(){

console.log('渲染完成');

}

);

</script>

点击销毁，控制台信息

getDefaultProps

getInitialState

组件将要渲染

渲染

组件渲染完成

渲染完成

组件将要销毁

8 Mixin

——将多个组件中，相同的功能提取出来，复用

原始代码

//Message组件

var Message=React.createClass({

clickEvent:function(){

console.log('Message');

render:function(){

return(

<div>

<button onClick={this.clickEvent}>MessageBtn</button>

</div>

);

}

});

//Child组件

var Child=React.createClass({

clickEvent:function(){

console.log('Child');

render:function(){

return(

<button onClick={this.clickEvent}>ChildBtn</button>

);

}

});

//渲染组件

ReactDOM.render(

<Message/>,

document.getElementById('container'),

function(){

console.log('渲染完成');

}

);

</script>

Mixin

             <div id="container"></div> 
 
             <script type="text/babel"> 
 
                 //Mixin 
 
                 var Fn={ 
 
                      clickEvent:function(data){ 
 
                           console.log(data); 
 
                      }, 
 
                 } 
 
                 //Message组件 
 
                 var Message=React.createClass({ 
 
                      mixins:[Fn], 
 
                      render:function(){ 
 
                           return( 
 
                                <div> 
 
                                     <button onClick={()=>this.clickEvent('Message')}>MessageBtn</button> 
 
                                     <Child/> 
 
                                </div> 
 
                           ); 
 
                      } 
 
                 }); 
 
                 //Child组件 
 
                 var Child=React.createClass({ 
 
                      mixins:[Fn], 
 
                      render:function(){ 
 
                           return( 
 
                                <button onClick={()=>this.clickEvent('Child')}>ChildBtn</button> 
 
                           ); 
 
                      } 
 
                 }); 
 
                 //渲染组件 
 
                 ReactDOM.render( 
 
                      <Message/>, 
 
                      document.getElementById('container'), 
 
                      function(){ 
 
                           console.log('渲染完成'); 
 
                      } 
 
                 ); 
 
             </script>