React的基本使用

广潞發表於 2019-8-18 23:12:00

<h2>1、脚手架安装React项目</h2>
安装 create-react-app 脚手架来创建 react 项目。
<div class="cnblogs_code">
<pre>npm install -g create-react-app
create-react-app my-app</pre>
</div>
使用该脚手架创建的 react 项目默认是不显示配置文件的，可以使用 npm run eject 命令将配置文件显示出来，该命令是一个单向操作，即一旦运行了，就不能再次将配置文件隐藏。
<h2>2、JSX语法</h2>
JSX是一种 JavaScript 的语法扩展，react 用它来声明 React 中的元素。你可以在 JSX 当中任意地使用 JavaScript 表达式，不过在 JSX 当中的表达式要包含在大括号里。
<div class="cnblogs_code">
<pre>//JSX语法
const element = <h1>Hello, world!</h1>;

function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
//在 JSX 中使用表达式
const element = (
<h1>
Hello, {formatName(user)}!
</h1>
);

// JSX 其实就是一个 JS 对象，你可以将它赋值给变量，或者当作参数传入、作为返回值都可以
function getGreeting(user) {
if (user) {
return <h1>Hello, {formatName(user)}!</h1>;
}
return <h1>Hello, Stranger.</h1>;
}</pre>
</div>
在代码编译过后你可以看到 JSX 会被转化为普通的 JavaScript 对象，所以实际上，JSX 语法返回的是一个 JS 对象，这个对象也被称为 React 元素。
在 JSX 中我们可以放心地使用用户输入，因为React DOM 在渲染之前默认会过滤掉所有传入的值，它可以确保你的应用不会被注入攻击。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS(跨站脚本) 攻击。
<div class="cnblogs_code">
<pre>const title = response.input;
// 直接使用是安全的：
const element = <h1>{title}</h1>;</pre>
</div>
 
<h3>2.1、JSX 的属性</h3>
在 JSX 中，可以使用引号来定义以字符串为值的属性，也可以使用大括号来定义以 JavaScript 表达式为值的属性
<div class="cnblogs_code">
<pre>const element = <div tabIndex="0"></div>;
const element = <img src={user.avatarUrl}></img>;</pre>
</div>
使用了大括号包裹的 JavaScript 表达式时就不要再到外面套引号了，因为JSX 会将引号当中的内容识别为字符串而不是表达式。
 
<h3>2.2、更新元素渲染</h3>
JSX 语法返回的是一个 JS 对象，这个对象也被称为 React 元素，元素是构成 React 应用的最小单位，在页面上进行渲染。
要将React元素渲染到根DOM节点中，我们通过把它们都传递给 <code class="gatsby-code-text">ReactDOM.render()</code> 的方法来将其渲染到页面上
<div class="cnblogs_code">
<pre>const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));</pre>
</div>
React 元素都是不可变的。当元素被创建之后，我们无法改变其内容或属性。如果使用上面的方法，即使用元素来渲染页面，更新界面的唯一办法是创建一个新的元素，然后将它传入 <code class="gatsby-code-text">ReactDOM.render()</code> 方法替换之前的元素。当然，我们可以通过使用有状态组件（类定义组件）来避免这种落后的方法。
 
<h2>3、组件</h2>
<h3>3.1、定义组件</h3>
组件可以接收任意的输入值（称之为“props”），并返回一个 React 元素，即 JS 对象。
函数定义组件
<div class="cnblogs_code">
<pre>function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}</pre>
</div>
ES6 类定义组件
<div class="cnblogs_code">
<pre>class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}</pre>
</div>
注意：组件的返回值只能有一个根元素。组件名称必须以大写字母开头。例如，<code class="gatsby-code-text"><div /></code> 表示一个DOM标签，但 <code class="gatsby-code-text"><Welcome /></code> 表示一个组件，并且在使用该组件时你必须定义或引入它。
<h3>3.2、组件接收传入值（props）</h3>
React 元素可以是DOM标签，也可以是用户自定义的组件，当 React 元素是用户自定义的组件，它会将 JSX 属性作为单个对象传递给该组件，这个对象称之为“props”。
<div class="cnblogs_code">
<pre>const element = <div />;
//用户自定义的组件
const element = <Welcome name="Sara" />;</pre>
</div>
在组件中，不允许修改 props 的值，只允许读取。 
 
<h2>4、类组件</h2>
使用元素渲染或者是函数定义组件渲染来更新页面非常不方便，所以在一个 react 项目中我们应该使用类组件来渲染页面。使用类我们就可以使用它的一些特性，例如局部状态 state、生命周期钩子等，这大大方便了我们的开发。
 类组件代码示例：
<div class="cnblogs_code">
<pre>class Clock extends React.Component {
constructor(props) {
super(props);//类组件应始终使用 props 调用基础构造函数。
this.state = {date: new Date()};
}

render() {
return (
 <div>
 <h1>Hello, world!</h1>
 <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
 </div>
);
}
}</pre>
</div>
<h3>4.1、组件生命周期</h3>
官网的组件生命周期图：
<img src="https://img2018.cnblogs.com/blog/1424359/201910/1424359-20191010153215487-1336385187.png">
 
 我们可以在生命周期钩子上定义一些函数来进行一些操作，如下实现了一个每秒钟修改一次状态的效果：
<div class="cnblogs_code">
<pre>class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
//组件挂载后运行
componentDidMount() {
//如果数据不渲染在页面上，你可以直接往类上添加字段，不需要添加到state上
this.timerID = setInterval(
 () => this.tick(),
 1000
);
}
//组件卸载前运行
componentWillUnmount() {
clearInterval(this.timerID);
}

tick() {
this.setState({
 date: new Date()
});
}

render() {
return (
 <div>
 <h1>Hello, world!</h1>
 <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
 </div>
);
}
}

ReactDOM.render(
<Clock />,
document.getElementById('root')
);</pre>
</div>
<h3>4.2、局部状态（state、setState）</h3>
局部状态 state 用来维护组件内部数据，可以通过 this.state.propertyName 来获取数据。构造函数是唯一能够初始化 <code class="gatsby-code-text">this.state</code> 的地方。
组件可以将它的状态作为属性传递给其子组件，但是除了拥有并设置它的组件外，其它组件不可访问另一个组件的状态，这就是为什么状态通常被称为局部或封装。
在更改局部状态时，不要直接修改，而应该使用 setState 方法，否则 react 不会重新渲染组件。setState 方法只是将你返回的对象合并到局部状态 state 中，并且是浅合并，即返回的对象中提及到的属性会被完全替换，没有涉及到的属性不受影响。
<div class="cnblogs_code">
<pre>//Wrong 不要直接修改
//this.state.comment = 'Hello';

// 应当使用 setState() 方法
this.setState({comment: 'Hello'});</pre>
</div>
在利用当前状态和 props 的值来修改下一状态时，应该用一个函数来作为 setState 的参数。否则如果直接修改的话，有可能更改会没有效果，因为这两种值是异步更新的。
<div class="cnblogs_code">
<pre>// Wrong 不应该直接修改
//this.setState({
//counter: this.state.counter + this.props.increment,
//});

//setState() 应该接受一个函数而不是一个对象。该函数将接收先前的状态作为第一个参数，将props做为第二个参数：
this.setState((prevState, props) => ({
counter: prevState.counter + props.increment
}));

//或者使用常规函数
this.setState(function(prevState, props) {
return {
counter: prevState.counter + props.increment
};
});</pre>
</div>
 
<h3>4.3、父子组件传值及事件调用</h3>
react 中父组件可以将数据作为子组件的属性进行传值，子组件通过 props 属性接收值。
父组件可以监听子组件中的某个事件，子组件直接在内部触发 props 事件即可以触发父组件监听的事件，由此父组件可以进行响应。
<div class="cnblogs_code">
<pre>//子组件
class Child extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
}

handleChange(e) {
//子组件触发 props 事件
this.props.onDataChange(e.target.value);
}

render() {
const val = this.props.val;
return (
 <input value={val} onChange={this.handleChange} />
);
}
}</pre>
</div>
<div class="cnblogs_code">
<pre>//父组件
class Calculator extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.state = {name: 'wen'};
}
//父组件将 onDataChange 传递给子组件即监听了该事件，当子组件触发该事件时，父组件触发 handleChange 事件
handleChange(name) {
this.setState({name});
}

render() {
return (
 <div>
 <Child
 val={this.state.name} onDataChange={this.handleChange} />
 </div>
);
}
}</pre>
</div>
 
<h2>5、事件处理</h2>
React 元素的事件函数命名采用驼峰式写法，这点跟普通 DOM 元素调用函数不太一样。
<div class="cnblogs_code">
<pre><!- 普通 DOM 元素 -->
<button onclick="activateLasers()">
Activate Lasers
</button>

<!- react 语法 -->
<button onClick={activateLasers}>
Activate Lasers
</button></pre>
</div>
在 React 中另一个不同是你不能使用返回 <code class="gatsby-code-text">false</code> 的方式阻止默认行为。你必须明确的使用 <code class="gatsby-code-text">preventDefault</code>。
<div class="cnblogs_code">
<pre><!- 普通 DOM 元素 -->
<a href="#" onclick="console.log('The link was clicked.'); return false">
Click me
</a>

<!- react 语法 -->
function handleClick(e) {
e.preventDefault();
console.log('阻止默认行为');
}
return (
<a href="#" onClick={handleClick}>
 Click me
</a>
);</pre>
</div>
事件处理的 this 指针问题及如何绑定 this 可以参考：https://www.cnblogs.com/wenxuehai/p/11378229.html 
<h3>5.1、给事件函数传递参数</h3>
为事件处理函数传递额外的参数，下面两种方式是等价的：
<div class="cnblogs_code">
<pre><button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button></pre>
</div>
箭头函数传递参数时，事件对象必须显式的进行传递，但是通过 <code class="gatsby-code-text">bind</code> 的方式，事件对象及其它的一些参数将会被隐式的进行传递。
通过 <code class="gatsby-code-text">bind</code> 方式向监听函数传参，在类组件中定义的监听函数，事件对象 <code class="gatsby-code-text">e</code>要排在所传递参数的后面
<div class="cnblogs_code">
<pre>preventPop(name, e){ //事件对象e要放在最后
 e.preventDefault();
alert(name);
}

<a href="" onClick={this.preventPop.bind(this,'aaa')}>Click</a></pre>
</div>
 
<h2>6、条件渲染</h2>
在 react 中，我们可以使用 if 语句、&& 运算符、三元运算符来实现条件渲染，主要就是通过运算符来控制元素是否显示。
<div class="cnblogs_code">
<pre>//if 语句控制是否渲染
render() {
let button = null;
if (true) {
 button = <LogoutButton onClick={this.handleLogoutClick} />;
} else {
 button = <LoginButton onClick={this.handleLoginClick} />;
}
return (
 <div>{button}</div>
);
}

// &&运算符控制是否渲染，在react中，大括号{}内如果是false，会忽略并跳过，并不会渲染出来
<div>
 <h1>Hello!</h1>
 {arr.length > 0 && <h2>aaa</h2> }
</div>

//三元运算符
<div>
{isLoggedIn ? (
 <LogoutButton/>
) : (
 <LoginButton />
)}
</div></pre>
</div>
如果不想让组件渲染，可以让 <code class="gatsby-code-text">render</code> 方法返回 <code class="gatsby-code-text">null，组件的<code class="gatsby-code-text">render</code>方法返回<code class="gatsby-code-text">null</code>并不会影响该组件生命周期方法的回调。</code>
 
<h2>7、列表渲染</h2>
在 react 中，可以使用 map 遍历方法来实现列表渲染。
<div class="cnblogs_code">
<pre>//可以生成一个 JSX 元素，然后将该 JSX 元素插入渲染
function NumberList(props) {
const numbers = ;
const listItems = numbers.map((number) =>
<li key={number.toString()}>
 {number}
</li>
);
return (
<ul>{listItems}</ul>
);
}

//或者直接在大括号中写遍历表达式，因为JSX允许在大括号中嵌入任何表达式
function NumberList(props) {
const numbers = props.numbers;
return (
<ul>
 {numbers.map((number) =>
 <ListItem key={number.toString()}
 value={number} />
 )}
</ul>
);
}</pre>
</div>
<h3>7.1、列表渲染中的 key</h3>
react 在使用列表渲染时，必须给每个列表元素分配一个 key，否则会出现一个警告 <code class="gatsby-code-text">a key should be provided for list items。</code><code class="gatsby-code-text"> </code>
列表渲染时，key只需在兄弟元素之间唯一即可。react 在进行列表渲染时，数组元素中使用的 key 在其兄弟元素之间应该是独一无二的。然而，它们并不需要是全局唯一的，即如果不是同一列表兄弟元素的话，它们的 key 值是可以重复的。当我们在同一个页面中先后进行两次列表渲染时，我们可以使用相同的键。
<div class="cnblogs_code">
<pre>//同一组件中，不同列表元素，key值可以重复
function Blog(props) {
const sidebar = (
<ul>
 {props.posts.map((post) =>
 <li key={post.id}>
 {post.title}
 </li>
 )}
</ul>
);
const content = props.posts.map((post) =>
<div key={post.id}>
 <h3>{post.title}</h3>
 <p>{post.content}</p>
</div>
);
return (
<div>
 {sidebar}
 <hr />
 {content}
</div>
);
}

const posts = [
{id: 1, title: 'Hello World', content: 'Welcome to learning React!'},
{id: 2, title: 'Installation', content: 'You can install React from npm.'}
];
ReactDOM.render(
<Blog posts={posts} />,
document.getElementById('root')
);</pre>
</div>
 
<h2>8、表单元素</h2>
<h3>8.1、受控组件</h3>
使用受控组件可以将用户输入的值保存在组件的状态属性中，并且能控制用户输入时所发生的变化。
<div class="cnblogs_code">
<pre>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});
}

//必须要主动绑定 onChange 事件，并且修改 value 值，此时 value的值才会改变。react并没有像Vue那样有v-model的功能
render() {
return (
 <input type="text" value={this.state.value} onChange={this.handleChange} />
);
}
}</pre>
</div>
textarea、select标签写法都类似，可参考：https://www.reactjscn.com/docs/forms.html
当有多个受控元素时，可以给每个元素都添加一个 name 属性，处理函数就可以根据 name 属性的值来进行相应操作，由此可以避免重复写处理函数。
<div class="cnblogs_code">
<pre>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({
 : value
});
}

render() {
return (
 <input
 name="isGoing"
 type="checkbox"
 checked={this.state.isGoing}
 onChange={this.handleInputChange} />
 <input
 name="numberOfGuests"
 type="number"
 value={this.state.numberOfGuests}
 onChange={this.handleInputChange} />
);
}
}</pre>
</div>
<h3>8.2、非受控组件</h3>
如果你觉得需要为每个表单元素绑定一个处理函数比较麻烦，你可以尝试使用非受控组件。非受控组件将真实数据保存在 DOM 中，我们可以使用 ref 从 DOM 中获取表单值。
使用非受控组件可以减小代码量，但并不推荐使用，推荐还是使用受控组件。
<div class="cnblogs_code">
<pre>class NameForm extends React.Component {
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
}

handleSubmit(event) {
alert(this.input.value);
event.preventDefault();
}

render() {
return (
 <form onSubmit={this.handleSubmit}>
 <input type="text" ref={(input) => this.input = input} />
 <input type="submit" value="Submit" />
 </form>
);
}
}</pre>
</div>
非受控组件还可以指定元素初始值，使用 defaultValue 
<div class="cnblogs_code">
<pre><input defaultValue="Bob" type="text" ref={(input) => this.input = input} /></pre>
</div>
 
<h2>9、组合（插槽）</h2>
在 react 中，可以通过使用 props.children 来实现类似于 Vue 中的插槽的功能。
<div class="cnblogs_code">
<pre>//子组件
function FancyBorder(props) {
return (
<div className={'FancyBorder FancyBorder-' + props.color}>
 {props.children}
</div>
);
}

//父组件
function WelcomeDialog() {
return (
<FancyBorder>
 <h1>Welcome</h1>
</FancyBorder>
);
}</pre>
</div>
具名插槽：
<div class="cnblogs_code">
<pre>//子组件
function SplitPane(props) {
return (
<div className="SplitPane">
 <div>
 {props.left}
 </div>
 <div>
 {props.right}
 </div>
</div>
);
}

//父组件
function App() {
return (
<SplitPane
 left={
 <Contacts />
 }
 right={
 <Chat />
 } />
);
}</pre>
</div>
上面的 <code class="gatsby-code-text"><Contacts /></code> 和 <code class="gatsby-code-text"><Chat /></code> 这样的 React 元素其实本质上都是对象，所以你可以像任何其他元素一样传递它们。使用具名插槽其实就是通过属性来传递数据，不过此时的数据是一个 react 元素而已。
  
来源：https://www.cnblogs.com/wenxuehai/p/11374469.html

頁: [1]

琼殿技术论坛's Archiver

React的基本使用