React学习笔记1

打算对React的学习过程 分阶段性的学习和总结吧,先把这周主要看的学的知识点做个记录,后期慢慢学到新的东西慢慢整理起来。刚开始比较生疏,难免有问题。

ReactDOM.render

ReactDOM.render 里面 逗号分隔 最后面不要不要标点符号 ,ReactDOM.render 是 React 的最基本方法,用于将模板转为 HTML 语言,并插入指定的 DOM 节点.

1
ReactDOM.render(element, container, callback) // 回调函数,可选。传入该值时,会在组件渲染完或更新完成后调用
1
2
3
4
ReactDOM.render(
<h1>huangyb</h1>,
document.getElementById('example')
)

chrome 扩展程序

React版本说明

写react 需要引入三个JS文件 react.jseacr-dom.jsbrowser.min.js (0.14版本之前合并为一个文件,0.14版本以上就拆分为三个文件)

React CDN:

页面中用 <script type="text/babel">标记来使用 JSX 转换器.在以前旧版本的只有一个react.js 文件 所以假如 React.render 相当于现在新版本的 ReactDOM.render

1
ReactDOM.render(<div>{name}</div> ,document.getElementById('id'))

需要有个Root父级元素包裹,不能插入的数据是多个同级,不然会报错。

render的两种方式

  • JSX 的基本语法规则:遇到 HTML 标签(以 < 开头),就用 HTML 规则解析;遇到代码块(以 { 开头),就用 JavaScript 规则解析。
1
2
3
4
5
var name2 = ['y1','y2','y3'];
ReactDOM.render(
<div> { name2.map(function (key) { return <li>{key}</li> }) } </div>,
document.getElementById('name22')
)
  • JSX 允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组,则会展开这个数组的所有成员
1
2
3
4
5
6
7
8
var arr = [
<h1>Hello world!</h1>,
<h2>React is awesome</h2>
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('example')
);

JSX = JavaScriptXML

React.createClass

React 允许将代码封装成组件(component),然后像插入普通 HTML 标签一样,在网页中插入这个组件。React.createClass 方法就用于生成一个组件类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="con"></div>
<script type="text/babel">
var HelloMess = React.createClass({
render: function () {
return <p className="pp">huangyb {this.props.yb}</p>
}
})
ReactDOM.render(
<HelloMess yb="你好"></HelloMess>,
document.getElementById('con'),function () {
console.log('render完成');
}
)

HTML 标签 vs. React 组件

  • React.render方法可以渲染HTML结构,也可以渲染React组件。渲染HTML标签,声明变量采用首字母小写
1
2
var myDivElement = <div className="foo" />;
React.render(myDivElement, document.body);
  • 渲染React组件,声明变量采用首字母大写
1
2
3
var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
React.render(myElement, document.body);

HTML转义

1
2
3
4
5
6
7
8
9
var htmlEle = "<strong>htmlEle</strong>";
ReactDOM.render(
<HybNode>
<div>HTML转义情况::{htmlEle}</div>
<div dangerouslySetInnerHTML={{__html: htmlEle}} data-hyb="xxx" aria-ybs="true"/>
</HybNode>,
document.getElementById('example3')
)

className 和 htmFor 的使用

1
2
3
4
5
6
7
8
9
10
11
#使用JSX
ReactDOM.render(
<label className="xxx" htmlFor="input">content</label>,
document.getElementById('example')
);
#不使用JSX
ReactDOM.render(
React.createElement('label', {className: 'xxx', htmlFor: 'input'}, 'content'),
document.getElementById('example')
);

js表达式

  • 表达式用{}包起来,不要加引号,加引号就会被当成字符串。
  • JSX是HTML和JavaScript混写的语法,当遇到<,JSX就当HTML解析,遇到{就当JavaScript解析。

属性表达式:

1
2
3
4
ReactDOM.render(
<div className={2 > 1 ? 'class-a' : 'class-b'}>content</div>,
document.body
);

子表达式:

1
2
3
4
5
6
7
8
9
10
11
var Nav = React.createClass({
render: function () {
return <div>nav</div>
}
});
ReactDOM.render(
<div>
{2 > 1 ? <Nav/> : <div>div</div>}
</div>,
document.body
);

注释, 同JS注释一样: 单行: // 多行: /**/

JSX延伸属性

为了解决手动添加属性造成的类型错误,React设定初始化完props后,props是不可改变的。为了解决这个问题,React引入了属性延伸。

1
2
3
4
var props = {};
props.foo = x;
props.bar = y;
var component = <Component {...props} />;

当需要拓展我们的属性的时候,定义一个属性对象,并通过{…props}的方式引入,React会帮我们拷贝到组件的props属性中。重要的是—这个过程是由React操控的,不是手动添赋值的属性。
需要覆盖的时候可以这样写:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var defaultStyle = { // 这两种方法写样式都能显示 ,但是还是用小驼峰的写法推荐
'font-size':'20px',
'listStyleType':'none'
}
var NodeList = React.createClass({
render: function(){
return(
<ol>
{
React.Children.map(this.props.children, function(child){
return <li style={defaultStyle}>{child}</li>
})
}
</ol>
);
}
});
ReactDOM.render(
<NodeList>
<span>23</span>
<span>88</span>
</NodeList>,
document.getElementById('example2')
)

style属性

在React中写行内样式时,要这样写,不能采用引号的书写方式

1
2
3
4
5
6
ReactDOM.render(
<div style={{color:'red'}}>
xxxxx
</div>,
document.body
);

自定义HTML属性

data-*aria-*

如果在编写React过程中往原生HTML标签中使用了自定义属性,React不会渲染的
【然而任意属性支持自定义元素 】

1
2
3
4
ReactDOM.render(
<div data-dd='xxx' aria-dd='xxx'>content</div>,
document.body
);
0%