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')

);

上一篇:【React】react学习笔记01-概念与基本使用


下一篇:按示例学python:使用python抓取网页正文