应公司的业务要求，现在又要转学RN，比几个月前的安卓还要懵逼，虽然还是有点猝不及防，但是心里略能接受，但是目前学习没有头绪，前端大神给推荐说看看阮一峰老师的博客，磕磕绊绊的弄了一周，现在刚看懂一点代码
本文是对阮一峰老师的React 入门实例教程学习的笔记
散记一些概念或者用法
- 数组用法
JSX语法遇到数组，就会将数据内容展开，然后插入后引用的地方
eg0.
var arr = [
<h1>Hello world!</h1>,
<h2>React is awesome</h2>,
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('example')
);
执行结果为
<div id="example">
<div data-reactroot="">
<h1>Hello world!</h1>
<h2>React is awesome</h2>
</div>
</div>
- 组件类
- React 允许将代码封装成组件进行使用，然后可以像HTML标签一样插入
- 通过
React.createClass生成组件类 - 组件类必须要有自己的render方法，用于输出组件
- 首字母必须大写
- 引用格式为`<组件名 属性A="xx" 属性B="yy"... />
- 组件类的实现必须包含一个顶层标签
- eg1.
<body>
<div id="example"></div>
<script type="text/babel">
var HelloMessage = React.createClass({
render: function() {
return <h1>Hello {this.props.name}</h1>;
}
});
ReactDOM.render(
<HelloMessage name="John" />,
document.getElementById('example')
);
</script>
</body>
运行结果
<div id="example">
<h1 data-reactroot="">
<!-- react-text: 2 -->
Hello
<!-- /react-text -->
<!-- react-text: 3 -->
John
<!-- /react-text -->
</h1>
</div>
- this.props.children
- 此属性表示组件的所有子节点，但是不包含组件的子节点的子节点，简单来说值组件的儿子节点，不在遍历到孙子节点和重孙子节点
eg2.
var NotesList = React.createClass({
render: function() {
return (
<ol>
{
React.Children.map(this.props.children, function (child) {
return <li>{child}</li>;
})
}
</ol>
);
}
});
ReactDOM.render(
<NotesList>
<span>hello</span>
<span>world</span>
</NotesList>,
document.getElementById('example')
);
运行结果为
1.hello
2.world
对代码略作修改
在<NotesList>增加一个字元素
<p>
<span>!</span>
</p>
<!--即代码为-->
ReactDOM.render(
<NotesList>
<span>hello</span>
<span>world</span>
<p>
<span>!</span>
</p>
</NotesList>,
document.getElementById('example')
);
通过查看页面代码
页面代码
通过运行，发现仅仅对 p 便签这个儿子元素进行了改变，对p的子元素并没有进行操作
- 注意事项
- 使用 this.props.children时可能返回三种结果
- 当前没有子节点 ，返回undefined
- 当前只有一个节点，返回object
- 当前有多个节点，返回一个array
- 由于直接使用可能会出问题，React 提供了
React.Children.map来遍历节点，用法可以参考eg2，另外在官网提供了React.Children的更多用法
- 使用 this.props.children时可能返回三种结果
- PropTypes
可以理解为一个属性类型校验，因为组件类属性可以为任意值（字符串、对象、函数等等），所以在特定的使用场景需要对属性的类型进行规定
- eg3.
<script type="text/babel">
var data = 123;
var MyTitle = React.createClass({
propTypes: {
title: React.PropTypes.string.isRequired,
},
render: function() {
return <h1> {this.props.title} </h1>;
}
});
ReactDOM.render(
<MyTitle title={data} />,
document.getElementById('example')
);
</script>
本例中属性要求类型是字符串，但是赋值的时候是一个数值类型，运行的时候会有一个警告
Warning: Failed propType: Invalid prop 'title' of type 'number' supplied to 'MyTitle', expected 'string'.
更多PropTypes设置参考官方文档
设置属性的默认值，可用getDefaultProps
- eg4.
var MyTitle = React.createClass({
getDefaultProps : function () {
return {
title : 'Hello World'
};
},
render: function() {
return <h1> {this.props.title} </h1>;
}
});
ReactDOM.render(
<MyTitle />,
document.body
);
程序执行完会显示 Hello World'
- DOM & virtual DOM
组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。只有当它插入文档以后，才会变成真实的 DOM 。
根据 React 的设计，所有的 DOM 变动，都先在虚拟 DOM 上发生，然后再将实际发生变动的部分，反映在真实 DOM上，这种算法叫做 DOM diff ，它可以极大提高网页的性能表现。
当 virtual DOM 需要调用真实的DOM的时候，需要用到ref关键字
- eg5.
var MyComponent = React.createClass({
handleClick: function() {
this.refs.myTextInput.focus();
},
render: function() {
return (
<div>
<input type="text" ref="myTextInput" />
<input type="button" value="Focus the text input" onClick={this.handleClick} />
</div>
);
}
});
ReactDOM.render(
<MyComponent />,
document.getElementById('example')
);
- 上面代码中，组件
MyComponent的子节点有一个文本输入框，用于获取用户的输入。这时就必须获取真实的 DOM 节点，虚拟 DOM 是拿不到用户输入的。为了做到这一点，文本输入框必须有一个ref属性，然后this.refs.[refName]就会返回这个真实的 DOM 节点。 -
注意，由于
this.refs.[refName]属性获取的是真实 DOM ，所以必须等到虚拟 DOM 插入文档以后，才能使用这个属性，否则会报错。上面代码中，通过为组件指定 Click 事件的回调函数，确保了只有等到真实 DOM 发生 Click 事件之后，才会读取this.refs.[refName]属性。
React 组件支持很多事件，除了Click事件以外，还有KeyDown、Copy、Scroll等，完整的事件清单请查看官方文档。
- this.state
通过state 属性实现当组件变化以后，状态随之改变的功能
- eg6
var LikeButton = React.createClass({
getInitialState: function() {
return {liked: false};
},
handleClick: function(event) {
this.setState({liked: !this.state.liked});
},
render: function() {
var text = this.state.liked ? 'like' : 'haven\'t liked';
return (
<p onClick={this.handleClick}>
You {text} this. Click to toggle.
</p>
);
}
});
ReactDOM.render(
<LikeButton />,
document.getElementById('example')
);
- 初始化属性状态： 在本例中定义了一个
like状态，并初始化为false - this.setState 用于修改状态,当其每次修改以后，自动调用
this.render方法，再次渲染组件，修改状态格式如下：
this.setState({状态key: 状态value}) - 区别：
-
this.props表示那些一旦定义，就不再改变的特性， -
this.state是会随着用户互动而产生变化的特性。
-
-
运行结果
网友评论