react闲谈——react官网教程基础篇解析分享
react官网教程基础解析文章首发：github react官网教程基础解析 打开react英文官网，你是不是还在因为自己英语不好，使用翻译软件看的糊糊涂涂。别担心，我结合react官网最新教程，一篇篇的细读研究之后，根据自己的经验总结了基础篇的知识，还有高级篇的后续总结。 1、使用redux和没有redux，react写法有什么不同吗？答：组件写法一样，但是state不一定交给组件内部管理，可能放到store上统一管理。 2、认识react，一个hello world！ReactDOM.render(
<h1>Hello,world!</h1>,document.getElementById('root')
);
3、如何使用react？答：推荐你使用ES6语法来写react，首先你需要Babel编译你的ES6代码，其次，你才可以使用比如 => （箭头函数），class（类），模板文字，let和const语句等ES6语法。 4、JSX介绍答：JSX是一种表达式，它有一个根标签，在内部可以嵌入表达式，使用{}（大括号）包裹起来。它看起来就是html的一部分，或者叫一个html模块。 class T extends React.Component {
render() {
return <div className="left-enter" style={}>{value}</div>
}
}
从上面的代码例子你可以看到几个和html不同的地方，class =》className，style是一个object，你还可以在dom元素中使用{}插入数据。 使用JSX还可以防止XSS（跨站脚本攻击），因为JSX只是表达式，它需要先转换成字符串，然后才能渲染到真实DOM上面，但对于真正的黑客来说，这种做法也不是安全的。 4、元素和组件的概念react组件： class T extends React.Component {
render() {
return <div className="left-enter" style={}>{value}</div>
}
}
react元素： <div className="left-enter" style={}>{value}</div>
5、组件的使用函数组件：函数组件没有状态和生命周期，但是你可以返回一个react元素。 function Welcome(props) {
return <h1>Hello,{props.name}</h1>;
}
class组件：非常强大，有自己的state和生命周期。和函数组件一样，class组件也需要返回一个react元素。 class Welcome extends React.Component {
componentWillMount() {}
componentDidMount() {}
render() {
return <h1>Hello,{this.props.name}</h1>;
}
}
在一个庞大复杂的网站应用中，要如何拆分组件呢？官网上说组件拆分的越细，复用性就越强，从实际开发中来看，这个说法没有错，但是 react还提到了一点，传递给组件的数据是"只读"的，要保证组件中的数据是"纯数据"，输入即输出。那么，如果你需要在组件中修改props.data render() {
const { data } = this.props
//定义一个新的变量来保存修改后的值。
let _data = data + 1;
}
6、组件的状态和生命周期前面我们提到组件分为函数组件和类组件，函数组件是无状态，类组件有状态和生命周期。 什么是状态？ 答：通俗理解，就是组件不同时候的不同表现，比如，一个按钮组件，可能有激活状态，不可点击状态，显示状态，隐藏状态等，在react用state来保存这些状态。 class Button extends React.Component {
constructor(props) {
super(props);
this.state = {
isShow: true,text: props.text,disabled: true
};
}
render() {
const { isShow,text,disabled} = this.state
return <button disabled={disabled} style={{display: isShow ? "block" : "none"}}>{text}</button>
}
}
如果要修改state，请使用，注意，你不能在render函数里面直接修改state，而是要通过事件去触发state更新。 this.setState({
isShow: false,disabled: false
})
由于setState有批处理功能，所以该方法可能不一定同步更新，如果你需要依赖上一次的状态和本次状态的计算，那么需要写成下面这种形式。 this.setState((prevState,props) => {
text: prevState.text++
});
demo网址：http://codepen.io/hyy1115/pen... 有时候，子组件不需要关注自身的状态，而是通过父组件的状态来改变，这时候的子组件可以写成函数形式，通过props传递父组件给的状态。 react生命周期 componentWillMount：出生了，把组件的状态和属性都设置好。 componentDidMount：渲染出来了，我不再是JSX，而是真实DOM了。 componentWillUnmount：要死了，死之前把遗产处理好。 class Button extends React.Component {
constructor(props) {
super(props);
this.state = {
isShow: true,disabled: true
};
}
componentWillMount() {
//出生了，可以给我数据和设置我的状态
}
componentDidMount() {
//活着多好
}
componentWillUnmount() {
//要死了，把我的一生痕迹都清除
}
render() {
const { isShow,disabled} = this.state
return <button disabled={disabled} style={{display: isShow ? "block" : "none"}}>{text}</button>
}
}
还有其他几个生命周期，并不是非常常用，需要用到的时候去看下别人的博客。 7、事件处理<button onClick={(e) => this.handleClick(e)}>
按钮
</button>
<input type="text" onChange={(e) => this.handleClick(e)} />
8、条件渲染前面button的例子我们已经使用到了条件渲染，条件渲染通过state来判断，常用的是控制style、className、DOM属性，JSX。 举几个常用的例子。 render() {
return (
<div>
{
this.state.isShow && <button>按钮</button>
}
</div>
)
}
render() {
return (
<div>
{
this.state.isShow ? <button>按钮</button> : <span>文本</span>
}
</div>
)
}
render() {
return <button disabled={this.state.disabled}>按钮</button>
}
9、列表渲染2个注意点： 数组要判断是否为空； 必须给一个key。 render() {
const { arr } = this.state
return arr.length > 0 && arr.map((value,key) => <li key={key}>{value}</li> )
}
10、表单我曾经经历过的一次阿里的面试，就考到了react表单的知识点。 受控组件：由react控制输入的表单组件。 在下面的例子中，input的value值由state来决定，用户输入触发onChange事件，然后更新state，达到修改value的目的。 class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
render() {
return (
<input type="text" value={this.state.value} onChange={this.handleChange} />
);
}
}
或许你没看出来和正宗input元素的区别，看一个真实DOM元素的例子,value由inupt自身维护，我们没有给value绑定值。 <input type="text"> textarea和input是一样的用法。 select有些许不同，将value绑定到select上，而不是option。 <select value={this.state.value} onChange={this.handleChange}>
<option value="1">1</option>
<option value="2">2</option>
</select>
还有一种是多个输入框的情况，比如登录，有账号、密码等，这时候操作这些不同的input可以通过ref或者name，class，id等方法去setState，看 class Reservation extends React.Component {
constructor(props) {
super(props);
this.state = {
isGoing: true,numberOfGuests: 2
};
this.handleInputChange = this.handleInputChange.bind(this);
}
handleInputChange(event) {
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
const name = target.name;
this.setState({
[name]: value
});
}
render() {
return (
<form>
<input
name="isGoing"
type="checkbox"
checked={this.state.isGoing}
onChange={this.handleInputChange} />
<input
name="numberOfGuests"
type="number"
value={this.state.numberOfGuests}
onChange={this.handleInputChange} />
</form>
);
}
}
不受控组件：很简单，就是DOM自己维护状态的组件，不受react控制。你可以给它设置defaultValue，但是不能去setState。 <input type="text" ref={(input) => this.input = input} defaultValue="默认值"/>
相信有人会试过设置defaultValue之后执行了setState去修改value，这样做控制台会发出警告。 总结：受控组件是指受react控制的组件，表单组件中的value和state同步，不受控组件是指不受react控制的组件，表单组件中的 11、状态提升你一定听说过变量提升，函数提升，那么状态提升是什么呢？ 首先你得了解双向绑定和单向数据流，双向绑定中，数据可以在不同的组件之间实现共享，这样做的确有很大的好处，但是在react中， 记得和阿里的一个面试官聊的时候，他要求我用react实现双向绑定，而我认为react应该采用状态提升来实现。最后没说服他，或许让Dan来 状态提升：state推崇单向数据流，数据从父组件通过props流向子组件，如果你在子组件中，需要修改state来和其他子组件共享数据更新， 如果实子组件和子组件之间任意共享数据，那么，后期维护会比较痛苦，特别是找bug的时候。 看一个状态提升的例子吧。 class Child extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
}
handleChange(e) {
this.props.upDateValue(e.target.value);
}
render() {
const {name,value} = this.props;
return (
<div>
<p>{name}：</p>
<input value={value}
onChange={this.handleChange}
/>
</div>
);
}
}
class Demo extends React.Component {
constructor(props) {
super(props);
this.state = {value: '',name: ''};
this.upDateValue = this.upDateValue.bind(this);
}
upDateValue(value) {
this.setState({value: value})
}
render() {
const {value} = this.state;
return (
<div>
<Child name="组件1" value={value} upDateValue={this.upDateValue} />
<Child name="组件2" value={value} upDateValue={this.upDateValue} />
</div>
);
}
}
ReactDOM.render(
<Demo />,document.getElementById('root')
);
demo网址：http://codepen.io/hyy1115/pen... 12、选择组合还是继承？用过原生js或者jQuery的同学可能对基础非常熟悉，继承可以实现扩展很多功能。 在react组件开发中，我们的每个react组件都是继承于React.Component。 class MyComponent extends React.Component {
}
我们不推荐你继承MyComponent。 //不推荐
class NextComponent extends MyComponent {
}
你应该充分利用react组件的强大性能，开发各种你需要的组件继承至React.Component。组件之间的嵌套非常强大，你可以嵌套函数组件，嵌套类组件。 详情前往：https://facebook.github.io/re... 最后react基础分析到此为止，学会这些基本的知识，你已经可以做出非常丰富的react应用了，当然，结合实例学习可以让你更快实践出产品。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |