react笔记汇总

1.什么是React？

a.React 是一个用于构建用户界面的 JAVASCRIPT 库。

b.React主要用于构建UI，很多人认为 React 是 MVC 中的 V。

c.React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。

d. React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

2.JSX语法：JavaScript+XML

基本方法：React.render(填入元素的html代码, 指定的元素)

使用JSX语法：javaScript+XML有以下几个优点：

a. JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化

b.它是类型安全的，在编译过程中就能发现错误

c. 使用 JSX 编写模板更加简单快速

例子：

ReactDOM.render(

<h1>Hello, world!</h1>,

document.getElementById('example')

);

我们可以在以上代码中嵌套多个 HTML 标签，需要使用一个 div 元素包裹它(必须使用一个根元素)，实例中的 p 元素添加了自定义属性 data-myattribute，添加自定义属性需要使用 data- 前缀。

注意：例子中的代码也可以独立写在一个js文件中，可以通过script标签引入，效果是一样的

d.react表达式，.在JSX中可以使用javascript表达式，表达式写在{}中

例子：

ReactDOM.render(

<h1>{1+1}</h1>,

document.getElementById('example')

);

注意：在 JSX 中不能使用 if else 语句，但可以使用 conditional (三元运算) 表达式来替代。

e.react样式， React 推荐使用内联样式。我们可以使用 camelCase 语法来设置内联样式. React 会在指定元素数字后自动添加 px 。

例子：

var myStyle = { fontSize: 100, color: '#FF0000' };

ReactDOM.render(

<h1 style = {myStyle}>LeoX笔记</h1>,

document.getElementById('example')

);

注意：style属性名须用camelCase命名法书写。如background-color须写为backgroundColor

f.注释, 注释需要写在花括号中

例子：

ReactDOM.render(

//注释

/*注释*/

<div>

<h1>菜鸟教程</h1>

{/*注释...*/}

</div>,

document.getElementById('example')

);

注意：在根元素中的注释须加大括号，但是在根元素以外的注释，不可加大括号，单行注释和多行注释都是支持的。

g.数组，JSX 允许在模板中插入数组，数组会自动展开所有成员

例子：

var arr = [ <h1>第一行</h1>, <h2>第二行</h2>, ];

ReactDOM.render(

<div>{arr}</div>,

document.getElementById('example')

);

注意：展开的数组元素须自带标签或者是字符串。

注意：由于 JSX 就是 JavaScript，一些标识符像 class 和 for 不建议作为 XML 属性名。作为替代，React DOM 使用 className 和 htmlFor 来做对应的属性。

注意：代码中嵌套多个 HTML 标签，需要使用一个标签元素包裹它

3.组件

定义组件使得我们的应用更容易来管理

定义组件使得我们的应用更容易来管理

把自定义组件当作普通标签使用，直接一个单标签即可

组件定义方法：

A.React.createClass 方法用于生成一个组件类

B.如果我们需要向组件传递参数，可用 this.props 对象；对象的属性不要使用保留字

C.组件名称第一个字母大写

例子：

var HelloMessage = React.createClass({ //React.createClass 方法用于生成一个组件类 HelloMessage。

render: function() {

return <h1>Hello World！</h1>;

}

});

ReactDOM.render(

<HelloMessage />,// <HelloMessage /> 实例组件类并输出信息。

document.getElementById('example')

);

注意：原生 HTML 元素名以小写字母开头，而自定义的 React 类名以大写字母开头，比如 HelloMessage 不能写成 helloMessage。除此之外还需要注意组件类只能包含一个顶层标签，否则也会报错。

4.如果我们需要向组件传递参数，可以使用 this.props 对象

例子：

var HelloMessage = React.createClass({

render: function() {

return <h1>Hello {this.props.name}</h1>;

}

});

ReactDOM.render(

<HelloMessage name="Runoob" />,

document.getElementById('example')

);

注意：例子中的this指向当前所在的组件，就是后面使用的标签。

注意，在添加属性时， class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字。

5.复合组件

我们可以通过创建多个组件来合成一个组件，即把组件的不同功能点进行分离。

var WebSite = React.createClass({

render: function() {

return (

<div>

<Name name={this.props.name} />

<Link site={this.props.site} />

</div> );

}

});

var Name = React.createClass({

render: function() {

return (

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

);

}

});

var Link = React.createClass({

render: function() {

return (

<a href={this.props.site}> {this.props.site} </a>

);

}

});

ReactDOM.render(

<WebSite name="百度一下 " site=" http://www.baidu.com" />, document.getElementById('example')

);

总结：在组件里使用其他组件的标签，就是复合组件

注意：组件名不一定是用单标签，也可以是双标签

6.自定义方法

A.绑定事件需要把事件名的首字母大写:onClick；

B.事件处理函数支持event对象；

C.组件中的事件处理函数只能在当前组件中使用，外面的组件无法使用，并且每个函数都需要单独定义。

例子：

let MyCom = React.createClass({

render:function(){

let name =  this.props.name;

return  (

<b onClick={this.getMyName.bind(this)} id="myid">

{this.props.name}

</b>

);

},

getMyName:function(a){

console.log(event.target);

d.target.innerHTML = this.props.name;

this.props.name = '张三';

console.log(this.props.name);

}

});

ReactDOM.render(

<MyCom name="LeoX"></MyCom>,

document.querySelector('.mydiv')

);

7.属性和默认属性

getDefaultProps()；//设置默认属性

例子：

let School = React.createClass({

render:function(){

return (<div>

<SchoolInfo name={this.props.schoolname}    m={this.props.m} />，

<StuInfo    name={this.props.name}          sex={this.props.sex} />

</div>);

}

});

let SchoolInfo = React.createClass({

render:function(){

console.log(this.props);

return <b>学校：{this.props.name}，<Major m={this.props.m} /></b>;

}

});

let Major = React.createClass({

render:function(){

console.log(this.props)

return <b>专业：{this.props.major[this.props.m]}</b>;

},

getDefaultProps:function(){

return {

major:['', '计算机科学与技术', '物联网', '信息技术']

};

}

});

let StuInfo = React.createClass({

render:function(){

return <b>姓名：{this.props.name}，性别：{this.props.sex == 1 ?'男':'女'}</b>;

}

});

let stuinfo = [

{schoolname:"复旦", name:"张三", sex:"1", m:1},{schoolname:"清华", name:"李四", sex:"2", m:2},{schoolname:"北大", name:"王五", sex:"1", m:3}

];

let stulist = [];

for (var i = 0; i < stuinfo.length; i++) {

stulist.push(<School schoolname={stuinfo[i].schoolname} name={stuinfo[i].name} sex={stuinfo[i].sex} m={stuinfo[i].m} />);

}

ReactDOM.render(

<span>{stulist}</span>,

document.querySelector('.mydiv')

);

注意：如果外部传入属性与内部默认属性重名了，即发生冲突了，默认属性会被外部传入同名属性覆盖，如果不同名则会被合并，都可以用this.props.+name调用。且属性不可更改，因为更改以后页面未被重新渲染，无任何效果，所以认定为无法更改，其实是可以更改，只不过没效果。

8.状态和属性

A.状态的值在修改的时候，组件会重新渲染；

B.修改状态需要使用this.setState()来设置状态值；

C. getInitialState()设置默认状态值，使用this.state.+name调用

D.this.setState()来设置改变的状态值，未改变的状态值可不设置。这个方法调用会重新渲染页面。

setState(object nextState[, function callback])

• nextState，将要设置的新状态，该状态会和当前的state合并
  • 不能在组件内部通过this.state修改状态，因为该状态会在调用setState()后被替换。
  • setState()并不会立即改变this.state，而是创建一个即将处理的state。setState()并不一定是同步的，为了提升性能React会批量执行state和DOM渲染。
  • setState()总是会触发一次组件重绘，除非在shouldComponentUpdate()中实现了一些条件渲染逻辑。

• callback，可选参数，回调函数。该函数会在setState设置成功，且组件重新渲染后调用。

例子：

html：<div id="date"></div>

<div class="mydiv">这里是一个盒子</div>

js：

document.querySelector('#date').innerHTML = new Date();

let Major = React.createClass({

render:function(){

return  <span>

专业：<b>{this.props.major[this.state.age]}</b>，设置：{this.state.age}年--

<button onClick={this.addAge}>增加一年</button>

<em>{this.state.username}</em>

</span>;

},

getDefaultProps:function(){

return {

major:['', '计算机科学与技术', '物联网', '信息技术']

};

},

getInitialState:function(){

return {

age:1,

username:'小明'

};

},

addAge:function(){

this.props.major = [];

this.setState({age:++this.state.age, username:'小红'});

console.log(this.state.age);

}

});

ReactDOM.render(

<Major m='1'/>,

document.querySelector('.mydiv')

);