认识React
认识React准备babel-cli写 React 有两种方式：
jsx 写起来感觉会更方便，但就需要用babel进行编译了。 用babel编译 React 的 jsx 有三种方法( 关于 babel 的具体使用方法好像还是有很多疑问的。以后会再折腾下)
这样我打算用 babel-cli 进行实时编译，会比较方便。 安装将工具全局安装了： $ [sudo] npm i -gd babel-cli 插件单独安装： $ npm i -d babel-preset-react 使用ps:我这里之前说错了
babel-cli 的 除此之外，你也可以写成绝对路径的插件地址。 在单独安装了插件后，你就可以不用写绝对路径地址了。 $ babel --presets react jsx --watch --out-dir build 如果不想每次敲命令，可以在项目目录（就是敲babel命令的目录）中新建一个 {
"presets": ["react"]
}
这样敲命令的时候就可以不要带上 $ babel jsx --watch --out-dir build
使用 React v0.14.x<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="JBody"></div> <!-- react 核心 js--> <script src="http://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script> <!-- 编译后的 jsx 引用 --> <script src="./build/test.js"></script> </body> </html> ps：官网的示例中，react 核心 js 是放在 组件组件概念先来个 var Input = React.createClass({
render: function(){
return(
<label for={this.props.id}>
<i>四月是誰的谎言</i>
<input id={this.props.id} value type="text"/>
</label>
)
}
})
通过 组件的渲染ReactDOM.render(
<Input />,document.getElementById('JBody')
);
调用 组件的两个重要对象props
props 的使用: var Input = React.createClass({
render: function(){
return(
// 使用 props
<label for={this.props.iid}>
<i>四月是誰的谎言</i>
<input id={this.props.iid} value type="text"/>
</label>
)
}
})
ReactDOM.render(
<Input iid="JWho"/>,// 赋值 props
document.getElementById('JBody')
)
state
state 的使用： var Items = React.createClass({
getInitialState: function() {
return {
data: [12312,1231,45,51512312,2131]
}
},render: function(){
return(
<ul>
{this.state.data.map((value,i) => {
return <li>{value}</li>
})}
</ul>
)
}
})
还可以在组件的生命周期函数里可以从服务器获取数据然后通过调用
改造下 var Input = React.createClass({
getInitialState: function() {
return {
who: '我'
}
},change: function(e){
let target = e.target
this.setState({
who : target.value
})
},render: function(){
// 使用 props
return(
<div>
<label for={this.props.iid}>
<i>四月是誰的谎言？</i>
<input id={this.props.iid} onChange={this.change} type="text"/>
</label>
<p>{`四月是${this.state.who}的谎言`}</p>
</div>
)
}
})
ReactDOM.render(
<Input />,document.getElementById('JBody')
)
这里进行了事件
组件的文档
组件的通信react 的核心中是没有关于两个不同组件之间的相互通信的方法的，但是官方给出了一种flux的通信概念、flux中文文档，然而社区似乎并不觉得这一套方案很好用，于是有了另一种通信概念redux。 我对通信的理解react 的组件化概念是很明确的，但对于组件之间通信可以说是基本没有。 在我的理解里面，组件的通信可以更明确地理解为数据的通信，因为数据和组件渲染分离是很重要的。 在其他的一些 没错，我们可以把 Flux、Redux 这些工具当成通信工具来看待，如果你喜欢，你完全可以用写信的方式（自己写一个观察者模式的函数）。当A组件的数据要与B组件的数据进行打电话的时候，拨通B组件的电话号码，然后把数据告诉B组件就可以了。数据会在运营商的系统里面走一遭，然后传到B组件那里的。 通信场景例如登录。 在一个页面上，如果存在两个或两个以上需要获取登录信息的组件，就将需要进行通信了。 组件的抽象与封装这块到没有太多的实践，组件的拆分、定义是一门深思熟虑的艺术。等有实践经验找到门路之后再做补充。 github:https://github.com/jincdream/jincdream.g... （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |